@import './styles/variables.css';
@import './styles/reset.css';
@import './styles/animations.css';

/* ===== 子页面液体玻璃基础组件 ===== */
/* 仅通过 .glass-* 类手动使用，不影响首页 */

/* 玻璃面板 */

/* 深色玻璃面板（用于极暗背景上的子页面） */

/* 胶囊形/大圆角玻璃按钮 */
.glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.6rem 1.25rem;
    border-radius: var(--glass-radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
    color: var(--glass-text);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    user-select: none;
}
.glass-btn:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border-highlight);
    transform: scale(1.03);
    filter: brightness(1.1);
}
.glass-btn:active {
    transform: scale(0.97);
    box-shadow: var(--glass-shadow-inset);
}

.glass-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.4);
}

/* 主按钮：浅色半透明填充+高光边框 */

/* 次按钮：纯玻璃描边 */
.glass-btn-secondary {
    background: transparent;
    border-color: var(--glass-border);
    color: var(--glass-text);
}
.glass-btn-secondary:hover {
    background: var(--glass-bg);
    border-color: var(--glass-border-highlight);
}

/* 圆形图标按钮 */

/* 玻璃输入框 */
.glass-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: var(--glass-shadow-inset);
    color: var(--glass-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    outline: none;
}
.glass-input::placeholder {
    color: var(--glass-text-muted);
}
.glass-input:focus {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), var(--glass-shadow-inset);
}

/* 玻璃卡片 */

/* 子页面滚动条：细窄、白色半透明 */

/* Firefox */

/* ===== 深色科技风基础组件 ===== */

/* 主按钮 */

/* 次级按钮 */

/* 图标按钮 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--glass-bg);
    color: var(--color-text-medium);
    font-size: 1rem;
    backdrop-filter: var(--glass-blur);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    cursor: pointer;
}
.btn-icon:hover {
    color: var(--color-neon-cyan);
    border-color: var(--theme-border);
    box-shadow: var(--shadow-glow);
    background: rgba(212, 165, 116, 0.12);
}
.btn-icon:active {
    transform: scale(0.93);
}

/* 危险按钮 */

/* 禁用状态 */
.btn-disabled,
button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-icon:disabled,
.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    filter: grayscale(0.4);
}

/* 全局统一玻璃滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--glass-scrollbar-thumb);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--glass-scrollbar-thumb-hover);
}

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

* {
    scrollbar-width: thin;
    scrollbar-color: var(--glass-scrollbar-thumb) transparent;
}

/* 卡片 */

/* 面板 */

/* 输入框 */

/* ===== Game Settings Panel ===== */
.game-settings-panel {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overscroll-behavior: contain;

}
.game-settings-panel.active {

    opacity: 1;
    visibility: visible;

}
.settings-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.settings-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 30rem);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);

}
.settings-close-btn {

    position: absolute;
    top: 12px;
    right: 12px;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--glass-text);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.settings-close-btn:hover {

    background: var(--glass-bg);
    border-color: var(--glass-text);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.settings-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: var(--spacing-md);

}
.settings-group {

    margin-bottom: var(--spacing-md);

}
.settings-feature-grid {

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

}
.settings-feature-btn {

    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: rgba(220,225,230,0.9);
    font-size: 12px;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;
    text-align: center;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-feature-btn:hover {

    background: transparent;
    border-color: var(--glass-border-highlight);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-label {

    display: block;
    font-size: clamp(0px, 1.2vw, 0.875rem);
    color: var(--theme-text);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);

}
.settings-input {

    width: 100%;
    padding: clamp(0px, 1.2vh, 0.75rem) clamp(0px, 1.5vw, 1rem);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    color: var(--glass-text);
    font-size: clamp(1rem, 1.4vw, 1rem);
    transition: border-color var(--transition-fast);

    box-shadow: var(--glass-shadow-inset);
}
.settings-input:focus {

    border-color: rgba(255, 255, 255, 0.55);

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), var(--glass-shadow-inset);
}
.settings-input::placeholder {

    color: var(--color-text-dark);
}
.settings-input.model-provider-select,
.settings-input.model-name-select {

    cursor: pointer;
    appearance: auto;

    box-shadow: var(--glass-shadow-inset);
}
.settings-hint {

    display: block;
    font-size: clamp(0px, 1vw, 0.75rem);
    color: var(--theme-text);
    opacity: 0.6;
    margin-top: var(--spacing-xs);
    letter-spacing: 0.5px;

}
.settings-actions {

    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);

}
.settings-test-btn {

    flex: 1;
    padding: clamp(0px, 1.2vh, 0.75rem) clamp(0px, 1.5vw, 1rem);
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--glass-text);
    font-size: clamp(0px, 1.3vw, 0.875rem);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-test-btn:hover {

    background: transparent;
    border-color: var(--glass-text);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-save-btn {

    flex: 1;
    padding: clamp(0px, 1.2vh, 0.75rem) clamp(0px, 1.5vw, 1rem);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(0px, 1.3vw, 0.875rem);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    letter-spacing: 2px;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-save-btn:hover {

    transform: scale(1.02);
    box-shadow: var(--shadow-neon);

}
.settings-toggle {

    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

}
.settings-toggle-input {

    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--theme-primary);

    box-shadow: var(--glass-shadow-inset);
}
.settings-toggle-label {

    font-size: clamp(0px, 1.2vw, 0.875rem);
    color: var(--theme-text);
    cursor: pointer;

}
.settings-divider {

    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, rgba(var(--theme-primary-rgb), 0.3), transparent);
    margin: var(--spacing-md) 0;

}
.settings-title-secondary {

    font-size: clamp(0px, 1.5vw, 0.9375rem);
    color: var(--theme-primary);
    opacity: 0.8;
    margin-bottom: var(--spacing-sm);

}
.settings-font-size-control {

    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: center;

}
.settings-font-btn {

    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--glass-text);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-font-btn:hover {

    background: transparent;
    border-color: var(--glass-border-highlight);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.settings-font-btn:active {

    transform: scale(0.95);

}
.settings-font-size-label {

    font-size: clamp(0px, 1.6vw, 1rem);
    color: var(--theme-text);
    min-width: 0;
    text-align: center;
    font-weight: 500;

}
.settings-volume-control {

    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: center;

}
.settings-volume-slider {

    flex: 1;
    max-width: 200px;
    height: 0.375rem;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-primary) var(--value, 50%), rgba(255, 255, 255, 0.2) var(--value, 50%), rgba(255, 255, 255, 0.2) 100%);
    border-radius: 0.1875rem;
    outline: none;
    cursor: pointer;

}
.settings-volume-slider::-webkit-slider-thumb {

    -webkit-appearance: none;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--color-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform var(--transition-fast);

}
.settings-volume-slider::-webkit-slider-thumb:hover {

    transform: scale(1.1);

}
.settings-volume-slider::-moz-range-thumb {

    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--color-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;

}
.settings-volume-value {

    font-size: clamp(0px, 1.4vw, 0.875rem);
    color: var(--theme-primary);
    min-width: 0;
    text-align: right;
    font-weight: 500;

}
.settings-status {

    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: clamp(0px, 1.2vw, 0.8125rem);
    text-align: center;
    margin-top: var(--spacing-sm);
    background: rgba(74, 158, 138, 0.1);
    border: 1px solid rgba(74, 158, 138, 0.3);
    color: var(--color-accent-green);

}
.settings-status.error {

    background: rgba(196, 74, 58, 0.1);
    border-color: rgba(196, 74, 58, 0.3);
    color: var(--color-accent-red);

}

/* ===== NPC Panel ===== */
.game-npc-panel {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overscroll-behavior: contain;

}
.game-npc-panel.active {

    opacity: 1;
    visibility: visible;

}
.npc-panel-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.npc-panel-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 30rem);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);

}
.npc-panel-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: var(--spacing-md);

}
.npc-list {

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

}
.npc-list-item {

    display: flex;
    align-items: center;
    gap: clamp(0px, 1.5vw, 0.75rem);
    padding: clamp(0px, 1.5vh, 0.875rem) clamp(0px, 2vw, 1rem);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.npc-list-item:hover {

    background: rgba(255, 255, 255, 0.08);
    border-color: var(--glass-border-highlight);

}
.npc-list-item.active-npc {

    background: rgba(255, 255, 255, 0.12);
    border-color: var(--glass-border-highlight);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);

}
.npc-list-avatar {

    width: clamp(0px, 5vw, 3rem);
    height: clamp(0px, 5vw, 3rem);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);

}
.npc-list-avatar svg {

    width: 100%;
    height: 100%;

}
.npc-list-info {

    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;

}
.npc-list-name {

    font-size: clamp(0px, 1.6vw, 1rem);
    color: var(--color-text-light);
    font-weight: 600;
    letter-spacing: 0.5px;

}
.npc-list-desc {

    font-size: clamp(0px, 1.1vw, 0.8125rem);
    color: var(--color-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.npc-avatar {

    width: clamp(0px, 4vw, 3rem);
    height: clamp(0px, 4vw, 3rem);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);

}

/* ===== Story Panel ===== */
.game-story-panel {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overscroll-behavior: contain;

}
.game-story-panel.active {

    opacity: 1;
    visibility: visible;

}
.story-panel-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.story-panel-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 35rem);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);

}
.story-panel-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: var(--spacing-md);

}
.story-info {

    font-size: clamp(0px, 1.4vw, 1rem);
    line-height: 1.8;
    color: var(--color-text-medium);

}

/* ===== Model Config Panel ===== */
.model-config-panel {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);

}
.model-config-panel.active {

    opacity: 1;
    visibility: visible;

}
.model-config-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.model-config-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 30rem);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);

}
.model-config-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: var(--spacing-sm);

}
.model-config-subtitle {

    font-family: var(--font-elegant);
    font-size: clamp(0px, 1vw, 0.75rem);
    color: var(--color-text-dark);
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: var(--spacing-md);

}

/* ===== Model Type Selector ===== */
.model-type-selector {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);

}
.model-type-selector.active {

    opacity: 1;
    visibility: visible;

}
.model-type-selector-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);

}
.model-type-selector-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 26rem);
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--color-bg-medium), var(--color-bg-warm));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(255, 255, 255, 0.1);

}
.model-type-selector-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: var(--spacing-sm);

}
.model-type-selector-subtitle {

    font-family: var(--font-elegant);
    font-size: clamp(0px, 1vw, 0.75rem);
    color: var(--color-text-dark);
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: var(--spacing-lg);

}
.model-type-options {

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

}
.model-type-option {

    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1.25rem);
    background: rgba(var(--color-bg-dark-rgb), 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.model-type-option:hover {

    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
    transform: translateX(4px);

}
.model-type-option-icon {

    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}
.model-type-option-icon svg {

    width: 100%;
    height: 100%;

}
.model-type-option-text {

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2vh;

}
.model-type-option-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 1.4vw, 0.9375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 1px;

}
.model-type-option-desc {

    font-family: var(--font-elegant);
    font-size: clamp(0px, 0.9vw, 0.6875rem);
    color: var(--color-text-dark);
    letter-spacing: 1px;

}
.model-type-option-arrow {

    color: var(--color-neon-deep);
    opacity: 0.5;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    flex-shrink: 0;

}
.model-type-option:hover .model-type-option-arrow {

    opacity: 1;
    color: var(--theme-primary);
    transform: translateX(2px);

}

/* ===== TTS Model Config Panel Sections ===== */
.tts-section {

    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.15);

}
.tts-section:first-of-type {

    margin-top: 0;
    padding-top: 0;
    border-top: none;

}
.tts-section-header {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-md);

}
.tts-section-icon {

    font-size: 1.1rem;
    flex-shrink: 0;

}
.tts-section-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 1.4vw, 0.9375rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 1px;

}
.tts-voice-hint {

    font-size: clamp(0px, 1vw, 0.8125rem);
    color: var(--color-text-dark);
    text-align: center;
    padding: var(--spacing-md);
    opacity: 0.7;

}
.tts-voice-category {

    background: rgba(var(--color-bg-dark-rgb), 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: var(--spacing-sm);
    transition: border-color var(--transition-fast);

}
.tts-voice-category:hover {

    border-color: rgba(255, 255, 255, 0.3);

}
.tts-voice-category-header {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;

}
.tts-voice-icon {

    font-size: 1.1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;

}
.tts-voice-label {

    font-size: clamp(0px, 1.1vw, 0.8125rem);
    color: var(--color-neon-cyan);
    letter-spacing: 0.5px;
    font-weight: 500;

}
.tts-voice-select,
.tts-voice-input {

    margin-top: 2px;

    box-shadow: var(--glass-shadow-inset);
}
.tts-voice-narrator {

    border-left: 3px solid rgba(100, 181, 246, 0.4);

}
.tts-voice-male {

    border-left: 3px solid rgba(129, 199, 132, 0.4);

}
.tts-voice-female {

    border-left: 3px solid rgba(240, 147, 175, 0.4);

}
.tts-help-btn {

    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--glass-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: clamp(0px, 1vw, 0.75rem);
    font-family: inherit;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.tts-help-btn:hover {

    background: transparent;
    border-color: var(--glass-text);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.tts-edge-config .settings-input {

    margin-bottom: 4px;

    box-shadow: var(--glass-shadow-inset);
}
.tts-toggle-row {

    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

}
.tts-toggle-label {

    font-size: clamp(0px, 1vw, 0.8125rem);
    color: var(--color-text-dark);
    min-width: 2.5rem;

}
.tts-toggle-switch {

    width: 40px;
    height: 22px;
    background: rgba(var(--color-bg-dark-rgb), 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 11px;
    cursor: pointer;
    position: relative;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.tts-toggle-switch::after {

    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-neon-deep);
    border-radius: 50%;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.tts-toggle-switch.active {

    background: rgba(255, 255, 255, 0.2);
    border-color: var(--theme-primary);

}
.tts-toggle-switch.active::after {

    left: 20px;
    background: var(--theme-primary);

}
.tts-slider-row {

    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

}
.tts-slider {

    flex: 1;
    accent-color: var(--theme-primary);
    height: 4px;

}
.tts-slider-value {

    font-size: clamp(0px, 1vw, 0.8125rem);
    color: var(--theme-primary);
    min-width: 3rem;
    text-align: right;

}

/* ===== Reader Settings Panel ===== */
.reader-settings-panel.active {

    opacity: 1;
    visibility: visible;

}
.reader-settings-tab.active {

    background: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-primary);
    color: var(--theme-primary);

}
.reader-settings-body.active {

    display: block;

}

/* ===== Chapter Start Page ===== */
.chapter-start-page.active {

    opacity: 1;
    visibility: visible;

}
.chapter-start-video {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

}
.chapter-video-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.chapter-start-border {

    position: absolute;
    inset: clamp(0px, 3vw, 2.5rem);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: var(--radius-lg);
    pointer-events: none;

}
.chapter-organization {

    font-family: var(--font-elegant);
    font-size: clamp(0px, 1vw, 0.8125rem);
    color: var(--color-text-dark);
    letter-spacing: 3px;
    margin-top: var(--spacing-sm);

}
.org-label {

    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;

}

/* ===== Homepage Missing Classes ===== */
.game-homepage.home-hidden {
    display: none !important;
}
.game-homepage * {
    box-sizing: border-box;
}
.menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-fast);
}
.menu-item:hover {
    transform: scale(1.05);
}

.menu-item:hover .menu-label {
    color: var(--theme-primary);
}
.feature-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
    will-change: transform, box-shadow;
}
.feature-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 20px rgba(232, 201, 160, 0.3);
}
.btn-icon svg {
    width: 100%;
    height: 100%;
}
.feather-icon {
    width: clamp(0px, 5vw, 3rem);
    height: clamp(0px, 5vw, 3rem);
    margin: 0 auto var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.feather-icon svg {
    width: 100%;
    height: 100%;
}
.feature-btn-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}
.feature-btn-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    transition: opacity var(--transition-normal);
}

.feature-btn:hover .feature-btn-image img {
    opacity: 0.4;
}
.btn-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--color-bg-medium-rgb), 0.4), transparent);
    pointer-events: none;
}
.banner-image-overlay {
    pointer-events: none;
}
.icon-placeholder {
    width: clamp(0px, 2.4vw, 1.75rem);
    height: clamp(0px, 2.4vw, 1.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
}
.icon-placeholder svg {
    width: 100%;
    height: 100%;
}
.icon-glow {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.menu-item:hover .icon-glow {
    opacity: 1;
}

/* ===== Memorial Collection ===== */@keyframes mc-fade-in {

    from { opacity: 0; }
    to { opacity: 1; }

}

/* ===== Character List ===== */
.charlist-bg {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;

}
.charlist-bg-gradient {

    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 0.9) 100%);

}
.charlist-bg-video {

    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;

}
.charlist-header {

    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.2vw;
    padding: 1.6vw 2.4vw;
    border-bottom: 1px solid var(--color-border-light);
    background: rgba(var(--color-bg-dark-rgb), 0.8);
    backdrop-filter: blur(12px);

}
.charlist-back-btn {

    width: 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);

}
.charlist-back-btn:hover {

    background: rgba(255, 255, 255, 0.1);

}
.charlist-title-group {

    display: flex;
    flex-direction: column;
    gap: 0.125rem;

}
.charlist-title {

    font-family: var(--font-display);
    font-size: 2.2vw;
    font-weight: 600;
    color: var(--theme-primary);

}
.charlist-subtitle {

    font-family: var(--font-elegant);
    font-size: 1.2vw;
    color: var(--color-text-dark);
    letter-spacing: 3px;

}
.charlist-count {

    margin-left: auto;
    font-size: 1.5vw;
    color: var(--color-text-medium);

}
.charlist-main {

    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    padding: 2.4vw;

}
.charlist-empty {

    text-align: center;
    padding: 10vh 0;
    color: var(--color-text-dark);
    font-size: 1.5vw;
    line-height: 1.8;

}

/* ===== Character Detail ===== */

/* ===== Character Chat ===== */
.character-chat-page {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    overflow: hidden;
    background: #0a0a0a;
    color: var(--color-text-light);

}
.character-chat-page.active {

    display: flex;

}
.charchat-bg {

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

}
.charchat-bg-gradient {

    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.85) 100%);

}
.charchat-left-panel {

    position: relative;
    z-index: 1;
    width: 40%;
    min-width: 30vw;
    max-width: 48vw;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border-light);
    overflow: hidden;

}
.charchat-left-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
}
.charchat-left-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.charchat-left-back-btn svg {
    width: 20px;
    height: 20px;
}
.charchat-model-area {

    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(var(--color-bg-dark-rgb), 0.6);

}
.charchat-model-area img {

    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));

}
.charchat-scene-bg {

    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.9));

}
.charchat-scene-overlay {

    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.5) 100%);

}
.charchat-scene-atmosphere {

    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

}
.charchat-particle {

    position: absolute;
    bottom: -10px;
    left: var(--x);
    width: 0.1875rem;
    height: 0.1875rem;
    background: var(--theme-primary);
    border-radius: 50%;
    opacity: 0;
    animation: charchatFloatUp var(--dur) ease-in-out infinite var(--delay);

}@keyframes charchatFloatUp {

    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    90% { opacity: 0.4; }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }

}
.charchat-char-info {
    background: transparent;
    padding: 1rem;
    text-align: center;
}
.charchat-char-name-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.charchat-char-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}
.charchat-online-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.charchat-char-title {

    font-size: 1.2vw;
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-xs);

}
.charchat-char-affection {

    display: flex;
    align-items: center;
    gap: var(--spacing-xs);

}
.charchat-affection-level {

    font-size: 1.1vw;
    color: var(--color-neon-cyan);
    white-space: nowrap;

}
.charchat-affection-bar {

    flex: 1;
    height: 0.5vw;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.125rem;
    overflow: hidden;

}
.charchat-affection-fill {

    height: 100%;
    background: linear-gradient(90deg, var(--color-neon-deep), var(--theme-primary));
    border-radius: 0.125rem;
    transition: width 0.6s ease;

}
.charchat-affection-points {

    font-size: 1.1vw;
    color: var(--color-text-dark);
    white-space: nowrap;

}
.charchat-right-panel {

    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}
.charchat-header {

    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 1.5vh 2vw;
    background: rgba(var(--color-bg-medium-rgb), 0.8);
    border-bottom: 1px solid var(--color-border-light);
    backdrop-filter: blur(8px);

}
.charchat-back-btn {

    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.charchat-header-info {

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;

}
.charchat-name {

    font-size: 1.5vw;
    color: var(--color-text-light);
    font-weight: 500;

}
.charchat-online-status {

    font-size: 1.1vw;
    color: var(--color-accent-green);

}
.charchat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.charchat-messages::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.charchat-input-area {

    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.charchat-voice-btn,
.charchat-emoji-btn,
.charchat-more-btn {

    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.charchat-voice-btn:hover,
.charchat-emoji-btn:hover,
.charchat-more-btn:hover {

    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.charchat-input-wrapper {

    flex: 1;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 4px 12px;
}
.charchat-input {

    width: 100%;
    max-height: 120px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    resize: none;
    outline: none;
}
.charchat-input:focus {

    outline: none;
}
.charchat-input::placeholder {

    color: rgba(255, 255, 255, 0.5);

}
.charchat-send-btn {

    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #007aff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.charchat-send-btn:hover {

    background: #3395ff;
}
.charchat-send-btn:active {

    transform: scale(0.92);
}
.charchat-send-btn svg {

    width: 18px;
    height: 18px;
}

/* ===== Game Page ===== */
.game-page {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: #0a0a0a;
    color: var(--color-text-light);
    font-family: var(--font-body);
    z-index: var(--z-content);

}
.game-page.active {

    display: flex;

}
.game-page-bg {

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

}
.game-bg-gradient {

    position: absolute;
    inset: 0;
    background: var(--theme-bg);

}
.game-bg-texture {

    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300d4ff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;

}
.game-header {

    position: relative;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 24px;
    max-height: 28px;
    padding: 0px clamp(0px, 1.5vw, 0.75rem);
    background: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}
.game-back-btn {

    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    padding: 2px 4px;
    color: var(--glass-text);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.game-back-btn:hover {

    background: rgba(0, 0, 0, 0.5);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.game-back-btn svg {

    width: clamp(0.75rem, 2.2vw, 1.125rem);
    height: clamp(0.75rem, 2.2vw, 1.125rem);
}
.game-back-btn span {

    font-size: clamp(0px, 1.3vw, 0.875rem);
}
.game-chapter-info {

    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

}
.game-chapter-number {

    font-family: var(--font-elegant);
    font-size: clamp(0px, 1.2vw, 0.875rem);
    letter-spacing: 2px;
    color: var(--color-neon-deep);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);

}
.game-chapter-title {

    font-family: var(--font-display);
    font-size: clamp(0px, 1.5vw, 1.125rem);
    font-weight: 600;
    color: var(--theme-primary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);

}
.game-settings-btn,
.game-tts-btn,
.game-header-btn {

    width: clamp(22px, 3.8vw, 2rem);
    height: clamp(22px, 3.8vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--glass-text);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    flex-shrink: 0;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.game-settings-btn:hover,
.game-tts-btn:hover,
.game-header-btn:hover {

    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.game-settings-btn svg,
.game-tts-btn svg,
.game-header-btn svg {

    width: clamp(0.75rem, 2.2vw, 1.125rem);
    height: clamp(0.75rem, 2.2vw, 1.125rem);

}
.game-header-btn-label {

    display: none;
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-medium);
    margin-top: 2px;

}
.game-header-status {

    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
    font-size: 10px;
    color: rgba(220,225,230,0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);

}
.ghs-item {

    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;

}
.ghs-icon {

    font-size: 12px;

}
.ghs-divider {

    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);

}
.ws-time-value {

    font-family: var(--font-elegant);
    color: var(--color-neon-cyan);

}
.ws-time-period {

    color: var(--color-text-dark);

}
.ws-weather-desc {

    font-size: clamp(0px, 1.5vw, 0.8125rem);
    color: rgba(255, 255, 255, 0.6);

}
.ws-status-tag {

    padding: clamp(0px, 0.3vh, 0.1875rem) clamp(0px, 0.8vw, 0.5rem);
    border-radius: 0.625rem;
    font-size: clamp(0px, 1vw, 0.75rem);

}
.ws-status-healthy {

    background: rgba(74, 158, 138, 0.1);
    color: var(--color-accent-green);

}
.game-content-area {

    position: relative;
    z-index: var(--z-content);
    flex: 1;
    display: flex;
    overflow: hidden;

}
.portrait-error-text {

    font-size: clamp(0px, 1.2vw, 0.8125rem);

}
.game-dialogue-area {

    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;

}
.dialogue-messages {

    flex: 1;
    overflow-y: auto;
    padding: clamp(0px, 1.5vh, 1rem) clamp(0px, 2vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(var(--color-bg-dark-rgb), 0.3) 0%, rgba(var(--color-bg-medium-rgb), 0.2) 50%, rgba(var(--color-bg-dark-rgb), 0.3) 100%);

}
.has-custom-bg .dialogue-messages {

    background: transparent;

}
.dialogue-bg-layer {

    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;

}
.dialogue-bg-layer.active {

    opacity: 1;

}
.dialogue-bg-media {

    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.dialogue-bg-media video {

    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;

}
.dialogue-bg-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;

}
.dialogue-messages {

    position: relative;
    z-index: 1;

}
.bg-settings {

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

}
.bg-type-selector {

    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;

}
.bg-type-btn {

    padding: 0.375rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.bg-type-btn:hover {

    background: rgba(255, 255, 255, 0.12);
    color: var(--color-neon-cyan);

}
.bg-type-btn.active {

    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-neon-cyan);

}
.bg-config-section {

    padding: 0.625rem 0;

}
.bg-hint {

    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.375rem 0;

}
.bg-hint code {

    background: rgba(255, 255, 255, 0.1);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.1875rem;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.7);

}
.bg-file-input {

    width: 100%;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.25rem 0;
    padding: 0.25rem 0;

}
.bg-file-input::-webkit-file-upload-button {

    padding: 0.25rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-neon-cyan);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.6875rem;
    margin-right: 0.5rem;

}
.bg-path-input {

    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-neon-cyan);
    border-radius: 0.375rem;
    font-size: 1rem;
    box-sizing: border-box;
    margin: 0.25rem 0;

}
.bg-path-input::placeholder {

    color: rgba(255, 255, 255, 0.3);

}
.bg-apply-btn {

    padding: 0.375rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-neon-cyan);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    margin-top: 0.375rem;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.bg-apply-btn:hover {

    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);

}
.bg-color-picker {

    width: 100%;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    padding: 0.125rem;
    margin: 0.25rem 0;

}
.bg-adjust-section {

    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

}
.bg-reset-btn {

    width: 100%;
    padding: 0.5rem;
    border: 1px solid rgba(180, 80, 80, 0.3);
    background: rgba(180, 80, 80, 0.08);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.bg-reset-btn:hover {

    background: rgba(180, 80, 80, 0.15);
    color: var(--color-neon-cyan);

}
.bg-preset-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
    margin: 0.375rem 0 0.625rem;

}
.bg-preset-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.bg-preset-item:hover {

    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);

}
.bg-preset-item span {

    font-size: 0.5625rem;
    color: rgba(255, 255, 255, 0.6);

}
.bg-preset-thumb {

    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.25rem;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.1);

}
.bg-preset-video {

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;

}
.game-dialogue-area:hover .bg-video-ctrl {

    opacity: 0.7;

}
.scroll-to-top-btn.visible {

    opacity: 1;
    visibility: visible;
    transform: translateY(0);

}
.msg-collapsible {

    cursor: pointer;
    user-select: none;
    position: relative;

}
.msg-collapsible::after {

    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.5);
    transition: transform var(--transition-fast);

}
.msg-collapsible.collapsed::after {

    transform: translateY(-50%) rotate(-90deg);

}
.msg-collapsible .msg-collapse-content {

    max-height: 500px;
    overflow: hidden;
    transition: max-height var(--transition-normal);

}
.msg-collapsible.collapsed .msg-collapse-content {

    max-height: 0;

}@keyframes dialogueFadeIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}
.game-input-area {

    position: relative;
    z-index: var(--z-content);
    display: flex;
    align-items: center;
    min-height: 28px;
    max-height: 32px;
    padding: 1px clamp(0px, 2vw, 1rem);
    padding-bottom: max(1px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.85);

    box-shadow: none;
}
.input-wrapper {

    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);

}
.input-mode-switch {
 display: flex; gap: 2px; margin-right: 4px; align-self: center; flex-shrink: 0;
}
.input-mode-btn {
 background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); border-radius: 6px; padding: 0 6px; cursor: pointer; font-size: 11px; transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; line-height: 1; min-width: 24px; min-height: 24px; white-space: nowrap;
}
.input-mode-btn.active {
 background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.35); color: var(--color-neon-cyan);
}
.input-mode-btn:hover {
 background: rgba(0, 0, 0, 0.5);
}
.input-mode-btn.action-mode {
 background: rgba(0, 0, 0, 0.35); border-color: rgba(100,180,120,0.4); color: #64b478;
}
.input-mode-btn.action-mode:hover {
 background: rgba(0, 0, 0, 0.5); border-color: rgba(100,180,120,0.55);
}
.msg-user-action {

    font-style: italic;
    opacity: 0.85;

}
.msg-user-action .msg-content {

    font-style: italic;

}
.game-input {

    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 24px;
    max-height: 96px;
    padding: 2px clamp(0px, 1.5vw, 0.75rem);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--glass-radius);
    color: var(--glass-text);
    font-size: clamp(1rem, 3.5vw, 1rem);
    line-height: 1.4;
    resize: none;
    transition: border-color var(--transition-fast);

    box-shadow: var(--glass-shadow-inset);
}
.game-input:focus {

    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 12px rgba(var(--theme-primary-rgb), 0.15);

}
.game-input::placeholder {

    color: var(--glass-text);
    opacity: 0.4;
}
.voice-btn {

    width: clamp(24px, 4vw, 2rem);
    height: clamp(24px, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glass-text);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    flex-shrink: 0;

}
.voice-btn:hover {

    color: var(--theme-primary);
    background: rgba(0, 0, 0, 0.5);

}
.voice-btn svg {

    width: clamp(0.875rem, 2.5vw, 1.125rem);
    height: clamp(0.875rem, 2.5vw, 1.125rem);

}
.game-send-btn {

    width: clamp(24px, 4vw, 2rem);
    height: clamp(24px, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    flex-shrink: 0;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.game-send-btn:hover {

    background: rgba(0, 0, 0, 0.5);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.game-send-btn svg {

    width: clamp(0.875rem, 2.5vw, 1.125rem);
    height: clamp(0.875rem, 2.5vw, 1.125rem);
}

@media (orientation: landscape) and (max-height: 450px) {
    .game-header {
        min-height: 22px;
        max-height: 26px;
        padding: 0px 6px;
    }
    .game-input-area {
        min-height: 26px;
        max-height: 30px;
        padding: 1px 6px;
        padding-bottom: max(1px, env(safe-area-inset-bottom));
    }
}

/* ===== Book Result Page ===== */
.book-result-page {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: #0a0a0a;
    color: var(--color-text-light);
    font-family: var(--font-body);

}
.book-result-page.active {

    display: flex;

}
.book-page-bg {

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

}
.book-page-bg::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 0.9) 100%);

}
.book-header {

    position: relative;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: clamp(0px, 1.2vh, 0.75rem) clamp(0px, 1.5vw, 1rem);
    background: rgba(var(--color-bg-dark-rgb), 0.8);
    border-bottom: 1px solid var(--color-border-light);
    backdrop-filter: blur(8px);

}
.book-back-btn {

    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: clamp(0px, 0.8vh, 0.5rem) clamp(0px, 1.2vw, 0.75rem);
    color: var(--glass-text);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.book-back-btn:hover {

    background: var(--glass-bg);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.book-back-btn svg {

    width: clamp(0px, 2.5vw, 1.5rem);
    height: clamp(0px, 2.5vw, 1.5rem);
}
.book-back-btn span {

    font-size: clamp(0px, 1.3vw, 0.875rem);
}
.book-header-title {

    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(0px, 1.8vw, 1.25rem);
    font-weight: 600;
    color: var(--theme-primary);
    letter-spacing: 4px;

}
.book-copy-btn,
.book-regenerate-btn {

    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: clamp(0px, 0.8vh, 0.5rem) clamp(0px, 1.2vw, 0.75rem);
    color: var(--color-text-medium);
    border-radius: var(--radius-md);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.book-copy-btn:hover,
.book-regenerate-btn:hover {

    color: var(--glass-text);
    background: transparent;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.book-copy-btn svg,
.book-regenerate-btn svg {

    width: clamp(0px, 2.5vw, 1.375rem);
    height: clamp(0px, 2.5vw, 1.375rem);

}
.book-copy-btn span,
.book-regenerate-btn span {

    font-size: clamp(0px, 1.2vw, 0.8125rem);

}
.book-body {

    position: relative;
    z-index: var(--z-content);
    flex: 1;
    overflow-y: auto;
    padding: clamp(0px, 2.5vh, 1.5rem) clamp(0px, 2vw, 1.25rem);

}
.book-loading {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0px, 10vh, 5rem) 0;

}
.book-loading-animation {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);

}
.book-loading-icon svg {

    width: clamp(0px, 8vw, 5rem);
    height: clamp(0px, 8vw, 5rem);
    animation: pulse 2s ease-in-out infinite;
    color: var(--theme-primary);

}
.book-loading-text {

    font-family: var(--font-display);
    font-size: clamp(0px, 1.8vw, 1.25rem);
    color: var(--theme-primary);
    letter-spacing: 2px;

}
.book-loading-bar {

    width: clamp(0px, 50vw, 18.75rem);
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.125rem;
    overflow: hidden;

}
.book-loading-fill {

    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-neon-deep), var(--theme-primary));
    border-radius: 0.125rem;
    transition: width 0.3s ease;

}
.book-content {

    max-width: 680px;
    margin: 0 auto;
    font-family: 'Georgia', 'Noto Serif TC', serif;
    line-height: 1.8;
    color: var(--glass-text);

}

/* ===== Reader Page ===== */
.corner-decoration, .top-left, .top-right, .bottom-left, .bottom-right {

    position: absolute;
    width: clamp(0px, 6vw, 3.75rem);
    height: clamp(0px, 6vw, 3.75rem);
    border: 1px solid rgba(212, 165, 116, 0.2);

}
.top-left {

    top: clamp(0px, 2vh, 1.25rem);
    left: clamp(0px, 2vw, 1.25rem);
    border-right: none;
    border-bottom: none;

}
.top-right {

    top: clamp(0px, 2vh, 1.25rem);
    right: clamp(0px, 2vw, 1.25rem);
    border-left: none;
    border-bottom: none;

}
.bottom-right {

    bottom: clamp(0px, 2vh, 1.25rem);
    right: clamp(0px, 2vw, 1.25rem);
    border-left: none;
    border-top: none;

}
.bottom-left {

    bottom: clamp(0px, 2vh, 1.25rem);
    left: clamp(0px, 2vw, 1.25rem);
    border-right: none;
    border-top: none;

}

/* ===== Chapter Mission (mission variant) ===== */
.mission-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 32.5rem);
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;

}
.mini-chapter:hover, .mini-chapter.active {

    background: rgba(255, 255, 255, 0.1);

}
.mini-chapter:hover .mini-chapter-dot, .mini-chapter.active .mini-chapter-dot {

    background: var(--theme-primary);

}
.msg-text {

    font-size: clamp(0px, 1.5vw, 0.8125rem);
    color: #4CAF50;

}

/* ===== Memorial Collection (modal variant) ===== */
.memorial-collection-modal {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);

}
.memorial-collection-modal.active {

    opacity: 1;
    visibility: visible;

}
.memorial-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.memorial-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 85vw, 56.25rem);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(212, 165, 116, 0.4);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);

}
.memorial-close-btn {

    position: absolute;
    top: clamp(0px, 2vh, 1.25rem);
    right: clamp(0px, 2vw, 1.25rem);
    width: clamp(0px, 4vw, 2.25rem);
    height: clamp(0px, 4vw, 2.25rem);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--glass-text);
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.memorial-close-btn:hover {

    border-color: var(--glass-text);
    transform: scale(1.1);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.memorial-header {

    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);

}
.memorial-header-line {

    width: clamp(0px, 8vw, 5rem);
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, var(--theme-primary), transparent);
    margin: var(--spacing-xs) auto;

}
.memorial-header-text {

    font-size: clamp(0px, 3vw, 1.75rem);
    color: var(--theme-primary);
    font-weight: 700;
    letter-spacing: 2px;

}
.memorial-body {

    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-lg);

}
.memorial-left {

    display: flex;
    flex-direction: column;
    align-items: center;

}
.paper-card, .avatar-card {

    width: 100%;
    max-width: clamp(0px, 25vw, 15rem);
    aspect-ratio: 3 / 4;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(212, 165, 116, 0.3);

}
.paper-card-texture {

    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f5e6d3, #e8d5c0, #d4c0a8);
    opacity: 0.9;

}
.avatar-ink-wash {

    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1), transparent);

}
.avatar-portrait {

    width: 100%;
    height: 100%;
    object-fit: cover;

}
.avatar-stamp {

    position: absolute;
    bottom: clamp(0px, 1vh, 1rem);
    right: clamp(0px, 1vw, 1rem);
    width: clamp(0px, 4vw, 2rem);
    height: clamp(0px, 4vw, 2rem);
    background: #c00;
    border-radius: 50%;
    opacity: 0.8;

}
.avatar-calligraphy {

    position: absolute;
    top: clamp(0px, 1vh, 1rem);
    left: clamp(0px, 1vw, 1rem);
    font-size: clamp(0px, 2vw, 1.125rem);
    color: rgba(0, 0, 0, 0.3);
    writing-mode: vertical-rl;

}
.avatar-info {

    margin-top: var(--spacing-md);
    text-align: center;
    width: 100%;

}
.avatar-name-en {

    font-size: clamp(0px, 2vw, 1.125rem);
    color: var(--theme-primary);
    font-weight: 700;

}
.avatar-name-jp {

    font-size: clamp(0px, 1.8vw, 0.875rem);
    color: rgba(212, 165, 116, 0.6);
    margin-top: 0.125rem;

}
.avatar-progress-bar {

    margin-top: var(--spacing-sm);
    width: 100%;

}
.progress-track {

    width: 100%;
    height: 0.25rem;
    background: rgba(212, 165, 116, 0.2);
    border-radius: 0.125rem;
    overflow: hidden;

}
.progress-fill {

    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--color-neon-sky));
    border-radius: 0.125rem;
    transition: width var(--transition-normal);

}
.progress-label {

    font-size: 0.6875rem;
    color: rgba(212, 165, 116, 0.6);
    margin-top: 0.25rem;
    text-align: right;

}
.memorial-right {

    display: flex;
    flex-direction: column;

}
.collection-masonry {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(0px, 15vw, 9.375rem), 1fr));
    gap: var(--spacing-sm);

}
.masonry-item {

    aspect-ratio: 3 / 4;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.masonry-item:hover {

    transform: scale(1.03);

}
.masonry-item.tall {

    grid-row: span 2;

}
.collection-paper {

    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5e6d3, #e8d5c0);

}
.paper-tape {

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: clamp(0px, 2vh, 1.25rem);
    background: rgba(212, 165, 116, 0.5);

}
.collection-icon-area {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 5vw, 3rem);
    height: clamp(0px, 5vw, 3rem);
    background: rgba(212, 165, 116, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.collection-text-area {

    position: absolute;
    bottom: clamp(0px, 0.5vh, 0.5rem);
    left: clamp(0px, 0.5vw, 0.5rem);
    right: clamp(0px, 0.5vw, 0.5rem);

}
.coll-number {

    font-size: 0.5625rem;
    color: rgba(0, 0, 0, 0.4);

}
.coll-name {

    font-size: clamp(0px, 1.5vw, 0.75rem);
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;

}
.coll-desc {

    font-size: 0.5625rem;
    color: rgba(0, 0, 0, 0.4);

}
.paper-edge-rip {

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(0px, 0.5vh, 0.5rem);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), transparent);

}
.paper-edge-rip.right {
 transform: rotate(180deg); 
}
.paper-edge-rip.rotated {
 transform: rotate(90deg); 
}
.paper-edge-rip.left {
 transform: rotate(-90deg); 
}
.paper-edge-rip.rotated-reverse {
 transform: rotate(-180deg); 
}
.locked-paper {

    background: linear-gradient(135deg, var(--color-bg-warm), var(--color-bg-medium));

}
.locked-icon {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 4vw, 2.25rem);
    height: clamp(0px, 4vw, 2.25rem);
    background: rgba(212, 165, 116, 0.2);
    border-radius: 50%;

}
.locked-name {

    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    color: rgba(212, 165, 116, 0.3);

}
.memorial-footer {

    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(212, 165, 116, 0.2);
    text-align: center;

}
.footer-ornament {

    width: clamp(0px, 10vw, 6.25rem);
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.6), transparent);
    margin: 0 auto var(--spacing-xs);

}
.footer-text {

    font-size: 0.75rem;
    color: rgba(212, 165, 116, 0.6);
    letter-spacing: 2px;

}
/* ================================================================
   Full-Body Model Test Page - 全身模型测试
   ================================================================ */
.model-test-page {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;

}
.model-test-page.active {

    display: flex;

}
.model-test-bg {

    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);

}
.model-test-bg-gradient {

    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);

}
.model-test-close-btn {

    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--glass-text);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: 'Noto Serif TC', serif;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.model-test-close-btn:hover {

    border-color: var(--glass-text);
    background: var(--glass-bg);
    transform: translateX(-2px);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.model-test-close-btn svg {

    flex-shrink: 0;
}
.model-test-layout {

    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

}
.model-test-canvas-area {

    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}
.model-test-loading {

    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: rgba(240, 240, 245, 0.6);
    font-size: 0.875rem;
    font-family: 'Noto Serif TC', serif;
    z-index: 2;

}
.model-test-spinner {

    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: modelTestSpin 1s linear infinite;

}@keyframes modelTestSpin {

    to { transform: rotate(360deg); }

}
.model-test-control-panel {

    width: clamp(0px, 30vw, 23.75rem);
    height: 100%;
    background: var(--glass-bg);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding: clamp(0px, 2vw, 1.5rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.model-test-panel-header {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-primary);
    font-size: clamp(0px, 1.8vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 1px;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-family: 'Noto Serif TC', serif;

}
.model-test-panel-header svg {

    flex-shrink: 0;
    opacity: 0.8;

}
.model-test-ai-control {

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: clamp(0px, 1.5vh, 0.875rem);

}
.model-test-ai-label {

    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0px, 1.2vw, 0.8125rem);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-family: 'Noto Serif TC', serif;

}
.model-test-ai-input-wrap {

    display: flex;
    gap: 0.375rem;

    box-shadow: var(--glass-shadow-inset);
}
.model-test-ai-input {

    flex: 1;
    padding: clamp(0px, 1vh, 0.625rem) clamp(0px, 1.2vw, 0.875rem);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: #f5e6d3;
    font-size: clamp(1rem, 1.3vw, 1rem);
    outline: none;
    transition: border-color var(--transition-fast);
    font-family: 'Noto Serif TC', serif;

    box-shadow: var(--glass-shadow-inset);
}
.model-test-ai-input::placeholder {

    color: rgba(240, 240, 245, 0.35);
}
.model-test-ai-input:focus {

    border-color: rgba(255, 255, 255, 0.55);

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), var(--glass-shadow-inset);
}
.model-test-ai-send {

    padding: clamp(0px, 1vh, 0.625rem) clamp(0px, 1.5vw, 1.125rem);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    color: #f5e6d3;
    font-size: clamp(0px, 1.3vw, 0.875rem);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    white-space: nowrap;
    font-family: 'Noto Serif TC', serif;

}
.model-test-ai-send:hover {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.25));
    border-color: var(--theme-primary);

}
.model-test-ai-send:disabled {

    opacity: 0.5;
    cursor: not-allowed;

}
.model-test-ai-response {

    margin-top: 0.5rem;
    min-height: 0;
    font-size: clamp(0px, 1.2vw, 0.8125rem);
    line-height: 1.5;

}
.model-test-ai-thinking {

    color: rgba(255, 255, 255, 0.7);
    animation: modelTestAiPulse 1.5s ease-in-out infinite;

}@keyframes modelTestAiPulse {

    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }

}
.model-test-ai-success {

    color: #a0d8a0;

}
.model-test-ai-error {

    color: #e0a0a0;

}
.model-test-section-label {

    color: rgba(240, 240, 245, 0.5);
    font-size: clamp(0px, 1.1vw, 0.75rem);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    font-family: 'Noto Serif TC', serif;

}
.model-test-motion-buttons,
.model-test-expression-buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;

}
.model-test-action-btn {

    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: rgba(240, 240, 245, 0.7);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: clamp(0px, 1.1vw, 0.75rem);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    font-family: 'Noto Serif TC', serif;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.model-test-action-btn:hover {

    background: transparent;
    border-color: var(--glass-text);
    color: #f5e6d3;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.model-test-pos-controls {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3125rem;

}
.model-test-pos-btn {

    padding: 0.375rem 0;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: rgba(240, 240, 245, 0.7);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: clamp(0px, 1.3vw, 1rem);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    text-align: center;
    font-family: 'Noto Serif TC', serif;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.model-test-pos-btn:hover {

    background: transparent;
    border-color: var(--glass-text);
    color: #f5e6d3;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.model-test-pos-btn[data-action="reset"] {

    grid-column: span 4;
    font-size: clamp(0px, 1.2vw, 0.875rem);

}
.model-test-dnd-overlay {

    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;

}
.model-test-dnd-overlay.active {

    opacity: 1;
    pointer-events: auto;
    background: var(--glass-bg);
}
.model-test-dnd-content {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.875rem 2.5rem;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;

}
.model-test-dnd-content span {

    font-size: 1rem;
    font-weight: 500;

}
.model-test-dnd-content small {

    font-size: 0.75rem;
    opacity: 0.6;

}
.model-test-model-section {

    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}
.model-test-model-buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;

}
.model-test-model-btn {

    font-size: 0.75rem !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: 0.75rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.model-test-model-btn:hover {

    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.model-test-model-btn.active {

    background: rgba(255, 255, 255, 0.25) !important;
    color: var(--color-neon-cyan) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
/* ================================================================
   Character List Page - 人偶圖鑑 (Art Deco Style)
   ================================================================ */
.character-list-page {

    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0a0f0c;
    font-family: 'Playfair Display', 'Noto Serif TC', serif;
    display: none;
    z-index: 60;
    opacity: 0;
    transition: opacity 0.4s ease;

}
.character-list-page.active {

    display: flex;
    flex-direction: column;
    opacity: 1;

}
.charlist-bg {

    position: absolute;
    inset: 0;

}
.charlist-bg-video {

    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;

}
.charlist-bg-gradient {

    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 18, 14, 0.7) 0%,
        rgba(10, 18, 14, 0.3) 25%,
        rgba(10, 18, 14, 0.4) 50%,
        rgba(10, 18, 14, 0.92) 100%
    );
    z-index: 1;

}
.charlist-header {

    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2vw;
    padding: 1vh 2vw;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(10, 18, 14, 0.6), transparent);

}
.charlist-back-btn {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3vw;
    min-width: 44px;
    min-height: 44px;
    padding: clamp(0.5rem, 1vh, 0.75rem) clamp(0.75rem, 2vw, 1.25rem);
    background: rgba(18, 28, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    color: var(--color-neon-blue);
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.25s ease;
    backdrop-filter: blur(8px);
    font-family: 'Noto Serif TC', serif;

}
.charlist-back-btn:hover {

    border-color: var(--color-neon-blue);
    background: rgba(18, 28, 22, 0.9);
    color: var(--color-neon-cyan);

}
.charlist-title-group {

    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.2vh;

}
.charlist-title {

    font-size: clamp(1.25rem, 3vw, 2rem);
    color: var(--color-neon-cyan);
    font-weight: 700;
    letter-spacing: clamp(0.1em, 0.8vw, 0.5em);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);

}
.charlist-subtitle {

    font-size: clamp(0.625rem, 1vw, 0.875rem);
    letter-spacing: clamp(0.1em, 0.6vw, 0.4em);
    color: rgba(255, 255, 255, 0.35);
    margin-top: 1px;

}
.charlist-count {

    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: clamp(0.8125rem, 2vw, 1.125rem);
    color: var(--color-neon-blue);
    font-weight: 600;

}
.charlist-count-unit {

    color: rgba(255, 255, 255, 0.4);
    font-size: clamp(0.625rem, 1.2vw, 0.75rem);

}
.charlist-filter-toggle {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0.5rem 0.875rem;
    background: rgba(18, 28, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    color: var(--color-neon-blue);
    font-family: 'Noto Serif TC', serif;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.25s ease;
    backdrop-filter: blur(8px);

}
.charlist-filter-toggle svg {

    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;

}
.charlist-filter-toggle:hover {

    border-color: var(--color-neon-blue);
    background: rgba(18, 28, 22, 0.9);
    color: var(--color-neon-cyan);

}
.charlist-filter-toggle.active,
.charlist-filter-toggle[aria-expanded="true"] {

    border-color: var(--color-neon-blue);
    box-shadow: 0 0 12px rgba(var(--theme-primary-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);

}
/* ===== Filter Bar ===== */
.charlist-afflatus-btn {

    padding: 0.6vh 1.5vw;
    background: rgba(18, 28, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3vw;
    font-family: 'Noto Serif TC', serif;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s ease;
    white-space: nowrap;

}
.charlist-afflatus-btn:hover {

    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-neon-blue);

}
.charlist-afflatus-btn.active {

    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-neon-blue);
    color: var(--color-neon-cyan);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);

}
.charlist-rarity-btn {

    padding: clamp(3px, 0.6vh, 6px) clamp(8px, 1.5vw, 14px);
    background: rgba(18, 28, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(10px, 1.3vw, 13px);
    font-family: 'Noto Serif TC', serif;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s ease;
    white-space: nowrap;

}
.charlist-rarity-btn:hover {

    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-neon-blue);

}
.charlist-rarity-btn.active {

    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-neon-blue);
    color: var(--color-neon-cyan);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);

}
/* ===== Main Content ===== */
.charlist-main {

    position: relative;
    z-index: 5;
    flex: 1;
    overflow-y: auto;
    padding: 0 clamp(0.75rem, 3vw, 2rem) clamp(1rem, 5vh, 3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vh, 1rem);

}
.charlist-sort-bar {

    display: flex;
    gap: 1vw;
    flex-wrap: wrap;
    flex-shrink: 0;

}
.charlist-sort-btn {

    padding: clamp(0.375rem, 0.6vh, 0.5rem) clamp(0.5rem, 1.5vw, 0.875rem);
    background: rgba(18, 28, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-family: 'Noto Serif TC', serif;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s ease;
    min-height: 36px;

}
.charlist-sort-btn:hover {

    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-neon-blue);

}
.charlist-empty {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    padding: 10vh 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.8vw;
    text-align: center;
    letter-spacing: 2px;

}
.charlist-empty-icon {

    font-size: 5vw;
    opacity: 0.2;

}
/* Character Portrait SVG Placeholder */
.char-portrait-svg {

    width: 100%;
    height: 100%;
    display: block;

}
/* Legacy compatibility - keep for any remaining references */
.charlist-card-info {
 margin-top: var(--spacing-xs); 
}

/* ===== Gacha Page ===== */
.gacha-page {

    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0a0a0a;
    font-family: 'Playfair Display', 'Noto Serif TC', serif;
    display: none;
    z-index: 50;

}
.gacha-page.active {

    display: flex;
    flex-direction: column;

}
/* Gacha Header */
/* Gacha Main */
/* Pull Video Overlay */
.gacha-pull-video-wrap.active {

    display: flex;
    align-items: center;
    justify-content: center;
    animation: gacha-fade-in 0.3s ease;

}@keyframes gacha-fade-in {

    from { opacity: 0; }
    to { opacity: 1; }

}
/* Envelope Result Overlay */
.gacha-envelope-result.active {

    display: flex;

}

.gacha-envelope-result {

    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 10, 6, 0.85);
    backdrop-filter: blur(4px);

}

.gacha-resume-card {

    width: min(92vw, 900px);
    max-height: 92vh;
    animation: gacha-envelope-appear 0.45s cubic-bezier(0.22, 1, 0.36, 1);

}

.gacha-resume-paper {

    position: relative;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(212, 165, 116, 0.12) 0%, transparent 35%),
        linear-gradient(135deg, #f9f0e6 0%, #f5e6d3 50%, #efe0cc 100%);
    border: 1px solid rgba(212, 165, 116, 0.65);
    border-radius: 0.5rem;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 0 40px rgba(212, 165, 116, 0.15) inset;
    color: #2a1810;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.gacha-resume-paper::before {

    content: '';
    position: absolute;
    inset: 0.5rem;
    pointer-events: none;
    border: 1px solid rgba(212, 165, 116, 0.35);
    border-radius: 0.25rem;

}

.gacha-resume-paper.rarity-4 {

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 0 60px rgba(255, 215, 0, 0.22) inset;

}

.gacha-resume-header {

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.35);

}

.gacha-resume-rarity,
.gacha-resume-afflatus {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-family: 'Noto Sans SC', 'Noto Serif SC', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

.gacha-resume-rarity.rarity-4 {

    background: linear-gradient(135deg, #ffd700 0%, #d4a574 100%);
    color: #2a1810;

}

.gacha-resume-rarity.rarity-3 {

    background: linear-gradient(135deg, #b47fe6 0%, #7b4ea3 100%);
    color: #fff;

}

.gacha-resume-rarity.rarity-2 {

    background: linear-gradient(135deg, #6bb5ff 0%, #3a7bc8 100%);
    color: #fff;

}

.gacha-resume-afflatus {

    background: rgba(212, 165, 116, 0.18);
    color: #7a4e2e;
    border-color: rgba(212, 165, 116, 0.45);

}

.gacha-resume-body {

    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: calc(92vh - 160px);

}

.gacha-resume-portrait-wrap {

    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 0.375rem;
    padding: 0.5rem;
    min-height: 220px;

}

.gacha-resume-portrait {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

.gacha-resume-portrait img,
.gacha-resume-portrait canvas {

    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;

}

.gacha-resume-info {

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

}

.gacha-resume-name {

    font-family: 'Noto Serif SC', 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #2a1810;
    line-height: 1.2;

}

.gacha-resume-title {

    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    color: #8a5e3e;
    font-weight: 500;
    margin-top: -0.25rem;

}

.gacha-resume-basic {

    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: #6b4a35;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(212, 165, 116, 0.4);

}

.gacha-resume-basic span {

    position: relative;

}

.gacha-resume-basic span:not(:last-child)::after {

    content: '|';
    position: absolute;
    right: -0.6rem;
    color: rgba(212, 165, 116, 0.5);

}

.gacha-resume-section {

    display: flex;
    flex-direction: column;
    gap: 0.35rem;

}

.gacha-resume-section-title {

    font-family: 'Noto Serif SC', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #a67c52;
    text-transform: uppercase;
    letter-spacing: 0.08em;

}

.gacha-resume-section-text {

    font-size: 0.95rem;
    line-height: 1.7;
    color: #3e2518;

}

.gacha-resume-first-message {

    font-style: italic;
    color: #5a3a26;
    background: rgba(212, 165, 116, 0.08);
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #d4a574;
    border-radius: 0 0.25rem 0.25rem 0;

}

.gacha-resume-duplicate-stamp {

    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    display: none;
    padding: 0.5rem 1rem;
    border: 2px solid rgba(183, 28, 28, 0.65);
    color: rgba(183, 28, 28, 0.85);
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    border-radius: 0.25rem;
    transform: rotate(12deg);
    background: rgba(255, 235, 235, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-shadow: 0 0 1px rgba(183, 28, 28, 0.3);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.25'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.25'/%3E%3C/svg%3E");

}

.gacha-resume-counter {

    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.8rem;
    color: rgba(90, 58, 38, 0.55);

}

.gacha-resume-confirm-btn {

    align-self: center;
    margin: 0.75rem 1.5rem 1.25rem;
    padding: 0.65rem 2.5rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4a574 0%, #b8895e 100%);
    color: #fff;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.gacha-resume-confirm-btn:hover {

    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}

.gacha-resume-confirm-btn:active {

    transform: translateY(0);

}

/* Gacha Footer */

/* ===== Gacha Letters Add Button ===== */

/* ===== Gacha Fragments Display ===== */

/* ===== Gacha Pity Counter ===== */

/* ===== Gacha Pity Progress Bar ===== */@keyframes pitySoftPulse {

    0%, 100% { box-shadow: 0 0 4px rgba(33, 150, 243, 0.3); }
    50% { box-shadow: 0 0 12px rgba(33, 150, 243, 0.5); }

}@keyframes pityHardPulse {

    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.7); }

}

/* ===== Gacha 4-Star Light Effect Enhancement ===== */@keyframes goldEnvelopeGlow {

    from { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.5)); }
    to { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.7)); }

}@keyframes goldRays {

    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }

}

/* ===== Gacha Shop Button ===== */

/* ===== Envelope Animation Overlay ===== */
.gacha-envelope-anim-overlay.active {

    display: flex;
    animation: gacha-fade-in 0.3s ease;

}@keyframes gacha-envelope-appear {

    from {
        opacity: 0;
        transform: scale(0.3) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}
/* Rarity glow effects */@keyframes gacha-glow-pulse {

    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }

}

/* ===== Ten Pull Summary Overlay ===== */
.gacha-ten-summary-overlay.active {

    display: flex;
    animation: gacha-fade-in 0.3s ease;

}

.gacha-ten-summary-overlay {

    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 10, 6, 0.85);
    backdrop-filter: blur(4px);

}

.gacha-ten-summary-panel {

    width: min(96vw, 1100px);
    max-height: 92vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 35%),
        linear-gradient(135deg, #f9f0e6 0%, #f5e6d3 100%);
    border: 1px solid rgba(212, 165, 116, 0.6);
    border-radius: 0.5rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: gacha-envelope-appear 0.45s cubic-bezier(0.22, 1, 0.36, 1);

}

.gacha-ten-summary-title {

    font-family: 'Noto Serif SC', 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2a1810;
    text-align: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.4);

}

.gacha-ten-summary-list {

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;

}

.gacha-ten-summary-card {

    position: relative;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(212, 165, 116, 0.4);
    border-radius: 0.375rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}

.gacha-ten-summary-card:hover {

    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}

.gacha-ten-summary-card.rarity-4 {

    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);

}

.gacha-ten-summary-portrait {

    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 0.25rem;
    overflow: hidden;

}

.gacha-ten-summary-portrait img,
.gacha-ten-summary-portrait canvas {

    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;

}

.gacha-ten-summary-info {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;

}

.gacha-ten-summary-name {

    font-family: 'Noto Serif SC', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2a1810;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;

}

.gacha-ten-summary-rarity {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;

}

.gacha-ten-summary-rarity.rarity-4 {

    background: linear-gradient(135deg, #ffd700 0%, #d4a574 100%);
    color: #2a1810;

}

.gacha-ten-summary-rarity.rarity-3 {

    background: linear-gradient(135deg, #b47fe6 0%, #7b4ea3 100%);

}

.gacha-ten-summary-rarity.rarity-2 {

    background: linear-gradient(135deg, #6bb5ff 0%, #3a7bc8 100%);

}

.gacha-ten-summary-duplicate {

    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgba(183, 28, 28, 0.6);
    color: rgba(183, 28, 28, 0.9);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 0.2rem;
    transform: rotate(10deg);
    background: rgba(255, 235, 235, 0.7);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;

}

.gacha-ten-summary-confirm {

    align-self: center;
    margin: 0 1.5rem 1.25rem;
    padding: 0.65rem 2.5rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4a574 0%, #b8895e 100%);
    color: #fff;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.gacha-ten-summary-confirm:hover {

    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}

.gacha-ten-summary-confirm:active {

    transform: translateY(0);

}

@keyframes ten-summary-slide-in {

    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }

}

/* ===== Letters Source Panel ===== */
.gacha-source-overlay.active {

    display: flex;
    animation: gacha-fade-in 0.3s ease;

}

/* ===== Exchange Shop Panel ===== */
.gacha-shop-overlay.active {

    display: flex;
    animation: gacha-fade-in 0.3s ease;

}
/* Choose Character Sub-panel */
/* Responsive */

/* ===== Book Shelf Page ===== */
.book-shelf-page {

    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0a0a0a;
    font-family: 'Playfair Display', 'Noto Serif TC', serif;
    display: none;

}
.book-shelf-page.active {

    display: block;

}

/* ===== Character Chat Page Sub-classes ===== */
.charchat-model-placeholder {

    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40vw;
    height: 60vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;

}
.charchat-message {
    display: flex;
    align-items: flex-start;
    width: 100%;
}
.charchat-message-player {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.charchat-message-character {
    flex-direction: row;
    justify-content: flex-start;
}
.charchat-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
}
.charchat-message-character .charchat-message-avatar {
    margin-right: 8px;
    margin-left: 12px;
}
.charchat-message-player .charchat-message-avatar {
    margin-left: 8px;
    margin-right: 12px;
}
.charchat-message-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    max-width: calc(100% - 72px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.charchat-message-player .charchat-message-bubble {

    background: #007aff;
    color: #fff;
    border-bottom-right-radius: 4px;

}
.charchat-message-character .charchat-message-bubble {

    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-bottom-left-radius: 4px;

}
.charchat-typing-indicator {

    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-sm) var(--spacing-md);

}
.charchat-typing-dot {

    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    animation: typing-bounce 1.4s ease-in-out infinite;

}
.charchat-typing-dot:nth-child(2) {
 animation-delay: 0.2s; 
}
.charchat-typing-dot:nth-child(3) {
 animation-delay: 0.4s; 
}@keyframes typing-bounce {

    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }

}

/* ===== User Info Modal ===== */
.user-info-modal {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);

}
.user-info-modal.modal-visible {

    opacity: 1;
    visibility: visible;

}
.user-info-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.user-info-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 85vw, 24rem);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(1rem, 3vw, 2rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);

}
.user-info-header {

    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1rem);
    margin-bottom: var(--spacing-md);

}
.user-info-avatar-wrap {

    width: clamp(4rem, 15vw, 5rem);
    height: clamp(4rem, 15vw, 5rem);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;

}
.user-info-avatar-img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}
.user-info-name-area {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;

}
.user-info-name {

    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--theme-primary);
    font-weight: 700;
    letter-spacing: 2px;

}
.user-info-level {

    font-size: clamp(0.75rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;

}
.user-info-divider {

    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    margin: var(--spacing-md) 0;

}
.user-info-bio {

    display: flex;
    flex-direction: column;
    gap: 0.375rem;

}
.user-info-bio-label {

    font-size: clamp(0.625rem, 1.5vw, 0.75rem);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;

}
.user-info-bio-input {

    width: 100%;
    min-height: 6rem;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: clamp(1rem, 2vw, 1rem);
    line-height: 1.6;
    padding: 0.625rem 0.875rem;
    outline: none;
    resize: vertical;
    box-sizing: border-box;

}
.user-info-bio-input::placeholder {

    color: rgba(255, 255, 255, 0.35);

}
.user-info-bio-input:focus {

    border-color: rgba(212, 165, 116, 0.55);
    background: rgba(212, 165, 116, 0.12);

}
.user-info-title {

    font-size: clamp(0.75rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;

}
.player-name-setup-content {

    display: flex;
    flex-direction: column;
    gap: 1rem;

}
.player-name-setup-header {

    text-align: center;

}
.player-name-setup-title {

    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--theme-primary);
    font-weight: 700;
    letter-spacing: 2px;

}
.player-name-setup-body {

    display: flex;
    flex-direction: column;
    gap: 0.875rem;

}
.player-name-setup-input {

    width: 100%;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: clamp(1rem, 2.2vw, 1rem);
    padding: 0.75rem 1rem;
    outline: none;
    box-sizing: border-box;

}
.player-name-setup-input::placeholder {

    color: rgba(255, 255, 255, 0.35);

}
.player-name-setup-input:focus {

    border-color: rgba(212, 165, 116, 0.55);
    background: rgba(212, 165, 116, 0.12);

}
.player-name-setup-btn {

    align-self: center;
    background: rgba(212, 165, 116, 0.2);
    border: 1px solid rgba(212, 165, 116, 0.4);
    border-radius: var(--radius-sm);
    color: var(--color-gold-light);
    font-family: inherit;
    font-size: clamp(0.875rem, 2.2vw, 1rem);
    padding: 0.625rem 2rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);

}
.player-name-setup-btn:hover {

    background: rgba(212, 165, 116, 0.3);
    border-color: rgba(212, 165, 116, 0.6);
    transform: translateY(-1px);

}
.user-info-stats {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    text-align: center;

}
.user-info-stat-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-sm) 0;
    background: rgba(var(--color-bg-medium-rgb), 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);

}
.stat-value {

    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--theme-primary);
    font-weight: 700;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;

}
.stat-label {

    font-size: clamp(0.5rem, 1.2vw, 0.6875rem);
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;

}

/* ===== Book Reader Page ===== */
.book-reader-page {

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Noto Serif TC', 'Georgia', serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;

}
.book-reader-page.active {

    opacity: 1;
    visibility: visible;

}

/* ===== Reader Themes ===== *//* Parchment (羊皮纸) - default */
/* Day (白天) */
/* Eye (护眼) */
/* Night (夜间) */

/* ===== Toolbar Hide/Show ===== */
.reader-header.hidden {

    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;

}
.reader-footer.hidden {

    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;

}

/* ===== Reader Panel ===== */
.reader-panel.active {

    opacity: 1;
    visibility: visible;

}

/* ===== TOC Sidebar ===== */
.reader-toc-sidebar.active {

    visibility: visible;

}
.reader-toc-sidebar.active .reader-toc-sidebar-overlay {

    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.reader-toc-sidebar.active .reader-toc-sidebar-drawer {

    transform: translateX(0);

}
.reader-toc-sidebar .reader-toc-item.active {

    background: rgba(255, 255, 255, 0.15);
    border-color: var(--glass-border-highlight);
    color: var(--theme-primary);
    font-weight: 600;

}

/* ===== Book TOC ===== */
.book-title-block {

    text-align: center;
    margin-bottom: var(--spacing-xl);

}
.book-main-title {

    font-size: clamp(0px, 4vw, 2.5rem);
    color: var(--theme-primary);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);

}
.book-subtitle {

    font-size: clamp(0px, 2vw, 1.125rem);
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;

}
.book-toc {

    margin-bottom: var(--spacing-xl);

}
.book-toc-title {

    font-size: clamp(0px, 3vw, 1.75rem);
    color: var(--theme-primary);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-align: center;

}
.book-toc-list {

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

}
.book-toc-item {

    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.book-toc-item:hover {

    background: rgba(255, 255, 255, 0.05);

}
.book-chapter {

    margin-bottom: var(--spacing-lg);

}
.book-chapter-title {

    font-size: clamp(0px, 3vw, 1.5rem);
    color: var(--theme-primary);
    font-weight: 700;
    margin-bottom: var(--spacing-md);

}
.book-dialogue-line {

    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-md);
    border-left: 2px solid rgba(255, 255, 255, 0.3);

}
.book-paragraph {

    margin-bottom: var(--spacing-md);
    font-size: clamp(0px, 2vw, 1rem);
    color: var(--color-text-primary);
    line-height: 1.8;

}
.book-epilogue {

    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;

}
.book-epilogue-text {

    font-size: clamp(0px, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;

}
.book-the-end {

    margin-top: var(--spacing-xl);
    text-align: center;
    font-size: clamp(0px, 3vw, 1.75rem);
    color: var(--theme-primary);
    font-weight: 700;
    letter-spacing: 4px;

}

/* ===== Page Curl Animation ===== */

/* ===== Reader Orientation ===== */

/* Chapter title float */
.reader-chapter-title-float.show {

    opacity: 1;

}

/* ===== Bookmark ===== */

/* ===== Mode Selector Modal ===== */
.mode-selector {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);

}
.mode-selector.active {

    opacity: 1;
    visibility: visible;

}
.mode-selector-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);

}
.mode-selector-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 80vw, 35rem);
    background: linear-gradient(135deg, var(--color-bg-medium), var(--color-bg-warm));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    padding: clamp(0px, 3vw, 2rem);

}
.mode-selector-title {

    font-size: clamp(0px, 3vw, 1.75rem);
    color: var(--theme-primary);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-lg);

}
.mode-options {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 20vw, 10rem), 1fr));
    gap: var(--spacing-md);

}
.mode-option {

    padding: clamp(0px, 3vh, 1.5rem);
    background: rgba(var(--color-bg-medium-rgb), 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.mode-option:hover {

    border-color: var(--theme-primary);
    transform: translateY(-2px);

}
.mode-option-icon {

    width: clamp(0px, 6vw, 3.5rem);
    height: clamp(0px, 6vw, 3.5rem);
    margin: 0 auto var(--spacing-sm);
    background: var(--theme-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.mode-option-name {

    font-size: clamp(0px, 2vw, 1rem);
    color: var(--theme-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;

}
.mode-option-desc {

    font-size: clamp(0px, 1.5vw, 0.75rem);
    color: rgba(255, 255, 255, 0.6);

}
.mode-option-badge {

    display: inline-block;
    margin-top: var(--spacing-xs);
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    color: var(--color-neon-sky);

}
.custom-mode-selector .mode-selector-content {

    padding-top: clamp(0px, 3vw, 1.75rem);

}
.custom-mode-back {

    display: block;
    margin: 0 0 var(--spacing-md);
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0px, 1.5vw, 0.875rem);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);

}
.custom-mode-back:hover {

    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: rgba(var(--color-bg-medium-rgb), 0.4);

}
.custom-mode-hint {

    display: inline-block;
    margin-top: var(--spacing-xs);
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.7);

}
.official-route-panel {

    display: none;

}
.official-route-back {

    display: block;
    margin: 0 0 var(--spacing-md);
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0px, 1.5vw, 0.875rem);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);

}
.official-route-back:hover {

    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: rgba(var(--color-bg-medium-rgb), 0.4);

}
.official-route-options {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 20vw, 10rem), 1fr));
    gap: var(--spacing-md);

}

/* ===== Script List Panel ===== */
.script-list-panel {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overscroll-behavior: contain;

}
.script-list-panel.active {

    opacity: 1;
    visibility: visible;

}
.script-list-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.script-list-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 85vw, 48rem);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);

}
.script-list-title {

    font-size: clamp(0px, 3vw, 1.75rem);
    color: var(--theme-primary);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-lg);

}
.script-list {

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

}
.script-new-btn {

    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    padding: clamp(0px, 2vh, 0.875rem);
    background: linear-gradient(135deg, var(--theme-primary), var(--color-neon-sky));
    color: var(--color-bg-dark);
    border: none;
    border-radius: var(--radius-md);
    font-size: clamp(0px, 2vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    margin-bottom: var(--spacing-md);
    box-sizing: border-box;
    line-height: 1.4;
    text-align: center;
    flex-shrink: 0;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.script-new-btn svg {

    width: 1.125rem;
    height: 1.125rem;
    vertical-align: middle;
    flex-shrink: 0;

}
.script-new-btn:hover {

    transform: scale(1.02);

}
.script-empty {

    text-align: center;
    padding: var(--spacing-xl);
    color: rgba(255, 255, 255, 0.6);

}
.script-filter-bar {

    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

}
.script-filter-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;

}
.script-filter-chip {

    display: inline-block;
    padding: 0.1875rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;

}
.script-filter-chip:hover {

    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--theme-primary);

}
.script-filter-chip.active {

    background: rgba(255, 255, 255, 0.25);
    border-color: var(--theme-primary);
    color: var(--theme-primary);

}
.script-filter-sort {

    display: flex;
    justify-content: flex-end;

}
.script-sort-select {

    padding: 0.25rem 0.5rem;
    background: rgba(var(--color-bg-medium-rgb), 0.6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--theme-primary);
    font-size: 0.6875rem;
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);

    box-shadow: var(--glass-shadow-inset);
}
.script-sort-select option {

    background: var(--color-bg-medium);
    color: var(--color-neon-cyan);
}
.script-card {

    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

}
.script-card:hover {

    background: rgba(255, 255, 255, 0.12);
    border-color: var(--glass-border-highlight);

}
.script-card-cover {

    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: var(--glass-radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);

}
.script-card-cover img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}
.script-card-info {

    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

}
.script-card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;

}
.script-card-name {

    font-size: clamp(0px, 2vw, 1rem);
    color: var(--theme-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.script-card-badge {

    font-size: 0.5625rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.5rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.03125rem;

}
.script-card-badge.builtin {

    background: rgba(33, 150, 243, 0.15);
    border: 1px solid rgba(33, 150, 243, 0.3);
    color: #64b5f6;

}
.script-card-badge.custom {

    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #81c784;

}
.script-card-author {

    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);

}
.script-card-summary {

    font-size: clamp(0px, 1.8vw, 0.8125rem);
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.script-card-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;

}
.script-card-tag {

    display: inline-block;
    padding: 0.0625rem 0.375rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: 0.625rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.5625rem;
    white-space: nowrap;

}
.script-card-meta {

    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);

}
.script-card-actions {

    display: flex;
    gap: var(--spacing-xs);
    margin-top: 0.25rem;

}
.script-play-btn {

    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--glass-text);
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.script-play-btn:hover {

    background: transparent;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.script-edit-btn {

    padding: 0.25rem 0.75rem;
    background: rgba(33, 150, 243, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: var(--radius-sm);
    color: #64b5f6;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.script-edit-btn:hover {

    background: rgba(33, 150, 243, 0.4);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.script-delete-btn {

    padding: 0.25rem 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-sm);
    color: #ff6b6b;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.script-delete-btn:hover {

    background: rgba(220, 53, 69, 0.4);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}

/* ===== Custom Chapter Editor - Enhanced Styles ===== */
/* See pages/custom-chapter/custom-chapter.css */

/* ===== TTS Panel ===== */
.tts-panel-overlay {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);

}
.tts-panel-overlay.active {

    opacity: 1;
    visibility: visible;

}
.tts-panel {

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: clamp(0px, 90vw, 28rem);
    max-height: 85vh;
    overflow-y: auto;
    z-index: calc(var(--z-modal) + 1);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 4vw, 1.75rem);
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);

}
.tts-panel.active {

    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);

}
.tts-panel-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}
.tts-panel-title {

    font-size: clamp(0px, 3vw, 1.5rem);
    color: var(--theme-primary);
    font-weight: 700;

}
.tts-panel-close {

    width: clamp(0px, 4vw, 2.25rem);
    height: clamp(0px, 4vw, 2.25rem);
    background: rgba(var(--color-bg-medium-rgb), 0.6);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: 50%;
    color: var(--theme-primary);
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}
.tts-panel-body {

    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

}
.tts-control-group {

    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

}
.tts-control-label {

    font-size: clamp(0px, 1.8vw, 0.875rem);
    color: var(--theme-primary);
    font-weight: 600;

}
.tts-toggle-row {

    display: flex;
    justify-content: space-between;
    align-items: center;

}
.tts-toggle-label {

    font-size: clamp(0px, 1.8vw, 0.875rem);
    color: var(--color-text-primary);

}
.tts-toggle-switch {

    position: relative;
    width: clamp(0px, 5vw, 2.75rem);
    height: clamp(0px, 3vh, 1.5rem);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background var(--transition-fast);

}
.tts-toggle-switch.active {

    background: var(--theme-primary);

}
.tts-toggle-switch.active .tts-toggle-slider {

    transform: translateX(clamp(0px, 2.5vw, 1.25rem));

}
.tts-voice-select, .tts-slider-row {

    width: 100%;
    padding: clamp(0px, 1vh, 0.625rem);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    color: var(--color-text-primary);
    font-size: clamp(0px, 1.8vw, 0.875rem);

    box-shadow: var(--glass-shadow-inset);
}
.tts-slider-value {

    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;

}
.msg-body {

    font-size: clamp(0px, 2vw, 0.9375rem);
    line-height: 1.6;
    color: var(--theme-text);

}
.msg-content {

    max-width: 80%;
    padding: clamp(0px, 1.5vh, 0.75rem) clamp(0px, 2vw, 1rem);
    border-radius: var(--radius-lg);

}
.tts-btn-inline {

    padding: 0.125rem 0.5rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--glass-text);
    font-size: 0.625rem;
    cursor: pointer;
    margin-left: var(--spacing-xs);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.msg-avatar {

    position: relative;
    width: clamp(0px, 4vw, 2.25rem);
    height: clamp(0px, 4vw, 2.25rem);
    border-radius: 50%;
    flex-shrink: 0;

}
.msg-avatar svg {

    overflow: hidden;
    border-radius: 50%;

}
.msg-avatar img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}
.msg-avatar-affection-bar {

    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 0.1875rem;
    background: rgba(var(--theme-primary-rgb), 0.2);
    border-radius: 0.125rem;
    overflow: hidden;

}
.msg-avatar-affection-fill {

    height: 100%;
    background: linear-gradient(90deg, #FF69B4, #FF1493);
    border-radius: 0.125rem;

}

/* ===== Game Chat Bubble Styles ===== */
.msg {

    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    animation: msgFadeIn 0.3s ease;
    align-items: flex-start;

}@keyframes msgFadeIn {

    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }

}
.msg-npc {

    flex-direction: row;
    align-self: flex-start;
    max-width: 85%;

}
.msg-npc .msg-content {

    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--theme-border);
    border-top-left-radius: var(--radius-xs);
    color: var(--theme-text);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;

}
.msg-npc .msg-content::after {

    content: '';
    position: absolute;
    left: -6px;
    top: 12px;
    width: 0;
    height: 0;
    border-right: 6px solid var(--theme-border);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;

}
.msg-user {

    flex-direction: row-reverse;
    align-self: flex-end;
    max-width: 85%;

}
.msg-user .msg-avatar {

    display: none;

}
.msg-user .msg-body {

    align-items: flex-end;

}
.msg-user .msg-content {

    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.35), rgba(var(--theme-primary-rgb), 0.15));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.4);
    border-top-right-radius: var(--radius-xs);
    color: var(--theme-text);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    backdrop-filter: blur(2px);

}
.msg-user .msg-content::after {

    content: '';
    position: absolute;
    right: -6px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid rgba(var(--theme-primary-rgb), 0.4);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;

}
.msg-user-action .msg-content {

    background: linear-gradient(135deg, rgba(100, 180, 120, 0.25), rgba(100, 180, 120, 0.1));
    border-color: rgba(100, 180, 120, 0.35);
    font-style: italic;

}
.msg-user-action .msg-content::after {

    border-left-color: rgba(100, 180, 120, 0.35);

}
.msg-narration {

    justify-content: center;
    align-self: center;
    max-width: 90%;

}
.msg-narration .msg-avatar {

    display: none;

}
.msg-narration .msg-body {

    align-items: center;

}
.msg-narration .msg-content {

    color: rgba(245, 230, 211, 0.95);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-left: 3px solid transparent;
    border-left-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent) 1;
    border-right: none;
    text-align: center;
    padding: clamp(0px, 1.2vh, 0.875rem) clamp(0px, 3vw, 1.75rem) clamp(0px, 1.2vh, 0.875rem) clamp(0px, 3vw, 1.75rem);
    max-width: 100%;
    line-height: 1.8;
    letter-spacing: 0.5px;
    position: relative;
    animation: narrationFadeIn 0.8s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

}@keyframes narrationFadeIn {

    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }

}
.msg-narration .msg-content::before,
.msg-narration .msg-content::after {

    content: '✦';
    display: inline-block;
    color: rgba(200, 184, 154, 0.35);
    font-style: normal;
    font-size: 0.7em;
    vertical-align: middle;
    margin: 0 0.5rem;

}
.msg-system {

    justify-content: center;
    align-self: center;
    max-width: 90%;

}
.msg-system .msg-avatar {

    display: none;

}
.msg-system .msg-body {

    align-items: center;

}
.msg-system .msg-content {

    background: rgba(184, 168, 152, 0.08);
    border: 1px solid rgba(184, 168, 152, 0.15);
    color: var(--color-text-dark);
    text-align: center;
    font-size: clamp(0px, 1.2vw, 0.8125rem);
    padding: clamp(0px, 0.8vh, 0.5rem) clamp(0px, 1.5vw, 1rem);

}
.msg-typing .msg-content {

    background: rgba(74, 48, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: clamp(0px, 1.2vh, 0.75rem) clamp(0px, 2vw, 1rem);

}
.msg-sender-row {

    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 0.25rem;

}
.msg-sender {

    font-size: clamp(0px, 1.5vw, 0.8125rem);
    color: var(--color-neon-sky);
    font-weight: 600;

}
.typing-dot {

    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    animation: typing-bounce 1.4s ease-in-out infinite;

}
.typing-dot:nth-child(2) {
 animation-delay: 0.2s; 
}
.typing-dot:nth-child(3) {
 animation-delay: 0.4s; 
}

/* ===== AI Reply Elapsed Chip ===== */
.msg-typing .msg-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.msg-elapsed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
}
.msg-elapsed-chip .chip-first::after {
    content: ' · ';
    margin: 0 2px;
    color: rgba(255, 255, 255, 0.4);
}
.msg-elapsed-chip .chip-first:only-child::after,
.msg-elapsed-chip .chip-first:empty::after,
.msg-elapsed-chip .chip-total:empty + .chip-first::after,
.msg-elapsed-chip .chip-total:empty ~ .chip-first::after {
    content: '';
}
.msg-elapsed-chip.chip-error {
    color: #ff6b6b;
    background: rgba(220, 50, 50, 0.18);
}
.msg-elapsed-chip.chip-error .chip-first::after { content: ''; }

@media (max-width: 360px) {
    .msg-elapsed-chip .chip-first { display: none; }
    .msg-elapsed-chip .chip-total::before { content: ''; }
}

/* ===== Visual Mode Loading Indicator ===== */
.visual-loading-indicator {
    position: fixed;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    animation: vliFadeIn 0.25s ease;
}
.vli-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vli-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    animation: vliBounce 1.4s ease-in-out infinite;
}
.vli-dot:nth-child(2) { animation-delay: 0.2s; }
.vli-dot:nth-child(3) { animation-delay: 0.4s; }
.visual-loading-indicator .msg-elapsed-chip {
    margin-left: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
}
@keyframes vliFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes vliBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 360px) {
    .visual-loading-indicator {
        padding: 6px 12px;
        font-size: 12px;
        bottom: 16%;
    }
    .visual-loading-indicator .msg-elapsed-chip .chip-first { display: none; }
}

/* ===== Message Action Buttons ===== */
.msg {
 position: relative; 
}
.msg-actions {
 position: absolute; top: 4px; right: 4px; display: none; gap: 4px; z-index: 10; 
}
@media (hover: hover) {
.msg:hover .msg-actions {
 display: flex;
}
}
.msg.msg-actions-show .msg-actions {
 display: flex;
}
.msg-user .msg-actions {
 right: auto; left: 4px; 
}
.msg-action-btn {
 background: rgba(0,0,0,0.5); border: none; color: rgba(255,255,255,0.7); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 12px; line-height: 1.4; transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.15s; 
}
.msg-action-btn:hover {
 background: rgba(0,0,0,0.8); color: #fff; 
}
.msg-edit-area {
 width: 100%; min-height: 60px; background: rgba(var(--color-bg-medium-rgb), 0.8); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; color: var(--color-text-light); font-size: clamp(1rem, 2vw, 1rem); line-height: 1.6; padding: 8px 10px; resize: vertical; font-family: inherit; box-sizing: border-box;
}
.msg-edit-area:focus {
 outline: none; border-color: rgba(255, 255, 255, 0.6); 
}
.msg-edit-actions {
 display: flex; gap: 6px; margin-top: 6px; 
}
.msg-edit-actions button {
 padding: 4px 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: var(--color-neon-cyan); font-size: 12px; cursor: pointer; font-family: inherit; transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.15s; 
}
.msg-edit-actions button:hover {
 background: rgba(255, 255, 255, 0.2); 
}
.msg-edit-actions .msg-edit-save {
 background: rgba(76, 175, 80, 0.15); border-color: rgba(76, 175, 80, 0.3); color: #81c784; 
}
.msg-edit-actions .msg-edit-save:hover {
 background: rgba(76, 175, 80, 0.25); 
}
.msg-edit-actions .msg-edit-branch {
 background: rgba(129, 199, 132, 0.12); border-color: rgba(129, 199, 132, 0.3); color: #81c784; 
}
.msg-edit-actions .msg-edit-branch:hover {
 background: rgba(129, 199, 132, 0.22); 
}
.msg-swipe-nav {
 display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.5); 
}
.msg-swipe-btn {
 background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 14px; padding: 0 4px; transition: color 0.15s; 
}
.msg-swipe-btn:hover {
 color: var(--color-neon-cyan); 
}
.msg-swipe-btn:disabled {
 opacity: 0.3; cursor: default; 
}

/* ===== Live2D Selector Modal ===== */
.live2d-selector-modal.active {

    opacity: 1;
    visibility: visible;

    box-shadow: var(--glass-shadow-inset);
}

/* ===== Toast Notification System ===== */
.toast-container {

    position: fixed;
    top: clamp(0px, 4vh, 2.5rem);
    right: clamp(0px, 3vw, 2.5rem);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;

}
.toast-notification {

    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    max-width: clamp(0px, 40vw, 25rem);
    padding: var(--spacing-md) clamp(0px, 2vw, 1.125rem);
    background: linear-gradient(135deg, rgba(var(--color-bg-medium-rgb), 0.95), rgba(var(--color-bg-dark-rgb), 0.95));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    animation: toastSlideIn 0.3s ease-out forwards;
    pointer-events: auto;

}
.toast-notification.toast-success {

    border-color: rgba(76, 175, 80, 0.5);
    background: linear-gradient(135deg, rgba(27, 50, 20, 0.95), rgba(14, 30, 10, 0.95));

}
.toast-notification.toast-error {

    border-color: rgba(244, 67, 54, 0.5);
    background: linear-gradient(135deg, rgba(var(--color-bg-warm-rgb), 0.95), rgba(var(--color-bg-dark-rgb), 0.95));

}
.toast-notification.toast-warning {

    border-color: rgba(255, 193, 7, 0.5);
    background: linear-gradient(135deg, rgba(var(--color-bg-warm-rgb), 0.95), rgba(var(--color-bg-dark-rgb), 0.95));

}
.toast-notification.toast-info {

    border-color: rgba(33, 150, 243, 0.5);
    background: linear-gradient(135deg, rgba(16, 30, 50, 0.95), rgba(8, 16, 30, 0.95));

}
.toast-notification.toast-hiding {

    animation: toastSlideOut 0.3s ease-in forwards;

}
.toast-icon {

    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    opacity: 0.9;

}
.toast-success .toast-icon {
 color: #4caf50; 
}
.toast-error .toast-icon {
 color: #f44336; 
}
.toast-warning .toast-icon {
 color: #ffc107; 
}
.toast-info .toast-icon {
 color: #2196f3; 
}
.toast-content {

    flex: 1;
    min-width: 0;

}
.toast-title {

    font-size: clamp(0px, 1.5vw, 0.875rem);
    font-weight: 600;
    margin-bottom: 0.125rem;
    color: var(--theme-primary);

}
.toast-message {

    font-size: clamp(0px, 1.3vw, 0.8125rem);
    line-height: 1.4;
    color: var(--color-text-muted);
    word-wrap: break-word;
    overflow-wrap: break-word;

}
.toast-close-btn {

    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.toast-close-btn:hover {

    opacity: 1;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}@keyframes toastSlideIn {

    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }

}@keyframes toastSlideOut {

    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }

}

/* ===== Exit Confirm Modal ===== */
.exit-confirm-modal {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overscroll-behavior: contain;

}
.exit-confirm-modal.active {

    opacity: 1;
    visibility: visible;

}
.exit-confirm-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(4px);

}
.exit-confirm-content {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(0px, 70vw, 25rem);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: var(--glass-radius-lg);
    padding: clamp(0px, 3vw, 2rem);
    text-align: center;

}
.exit-confirm-title {

    font-size: clamp(0px, 3vw, 1.5rem);
    color: var(--theme-primary);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);

}
.exit-confirm-text {

    font-size: clamp(0px, 2vw, 0.9375rem);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-lg);

}
.exit-confirm-actions {

    display: flex;
    gap: var(--spacing-md);
    justify-content: center;

}
.exit-confirm-btn, .exit-book-btn, .exit-normal-btn, .exit-cancel-btn {

    padding: clamp(0px, 1.5vh, 0.75rem) clamp(0px, 3vw, 2rem);
    border-radius: var(--radius-md);
    font-size: clamp(0px, 1.8vw, 0.875rem);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow var(--transition-fast);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-confirm-btn {

    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 600;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-confirm-btn:hover {

    transform: scale(1.05);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-book-btn {

    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-book-btn:hover {

    background: rgba(220, 53, 69, 0.4);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-normal-btn {

    background: linear-gradient(135deg, var(--theme-primary), var(--color-neon-sky));
    color: var(--color-bg-dark);
    border: none;
    font-weight: 600;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-normal-btn:hover {

    transform: scale(1.05);

}
.exit-cancel-btn {

    background: rgba(var(--color-bg-medium-rgb), 0.4);
    border: 1px solid var(--glass-border);
    color: var(--glass-text);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.exit-cancel-btn:hover {

    border-color: var(--glass-text);

}

/* ===== Video Progress Overlay ===== */
.video-progress-overlay {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;

}

/* ===== Video Result Overlay ===== */
.video-result-overlay {

    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;

}

.story-chapter-title {

    font-size: clamp(0px, 2.5vw, 1.25rem);
    color: var(--theme-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);

}

/* ===== Model Select ===== */
.model-select-wrapper {

    position: relative;
    margin-bottom: var(--spacing-sm);

}
.model-refresh-btn {

    position: absolute;
    right: clamp(0px, 1vw, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(0px, 3vw, 2rem);
    height: clamp(0px, 3vw, 2rem);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--theme-primary);
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}
.model-name-input {

    width: 100%;
    padding: clamp(0px, 1.5vh, 0.75rem);
    padding-right: clamp(0px, 6vw, 3.125rem);
    background: rgba(var(--color-bg-dark-rgb), 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: clamp(1rem, 2vw, 1rem);

}
.model-name-input:focus {

    outline: none;
    border-color: rgba(255, 255, 255, 0.55);

}

/* ===== Remaining Missing Classes ===== */
.btn-title {

    font-size: clamp(0px, 1.5vw, 0.75rem);
    color: var(--theme-primary);
    font-weight: 600;
    margin-top: 0.125rem;

}@keyframes blink-colon {

    50% { opacity: 0; }

}

/* ===== Reader Settings UI ===== */
.reader-font-size-btn.active, .reader-font-family-btn.active,
.reader-line-height-btn.active, .reader-theme-btn.active,
.reader-page-mode-btn.active,
.reader-font-size-btn:hover, .reader-font-family-btn:hover,
.reader-line-height-btn:hover, .reader-theme-btn:hover,
.reader-page-mode-btn:hover {

    border-color: var(--glass-text);
    color: var(--glass-text);

}
.reader-toggle-switch.active {

    background: var(--theme-primary);

}
.reader-toggle-switch.active .reader-toggle-slider {

    transform: translateX(clamp(0px, 2.5vw, 1.25rem));

}

/* ===== Announcement Modal ===== */
.announcement-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Bookshelf announcement button */

/* ===== TTS Slider ===== */
.tts-slider {

    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.125rem;
    outline: none;

}
.tts-slider::-webkit-slider-thumb {

    -webkit-appearance: none;
    appearance: none;
    width: clamp(0px, 2vw, 1.125rem);
    height: clamp(0px, 2vw, 1.125rem);
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;

}

/* ===== Mobile Responsive - Game Page ===== *//* Safe area for notched devices */
@supports (padding: max(0px)) {

    .game-header {
        padding-top: max(clamp(0px, 1.2vh, 0.75rem), env(safe-area-inset-top));
    }
.game-input-area {
        padding-bottom: max(clamp(0px, 1.2vh, 0.75rem), env(safe-area-inset-bottom));
    }

}
.portrait-warning {

    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(var(--color-bg-dark-rgb), 0.95);
    justify-content: center;
    align-items: center;

}
.portrait-warning-content {

    text-align: center;
    color: var(--theme-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

}
.portrait-warning-title {

    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-neon-light);

}
.portrait-warning-text {

    font-size: 1rem;
    color: var(--color-text-medium);

}@media (orientation: portrait) and (max-width: 768px) {

    .portrait-warning {
        display: flex;
    }

}

/* ===== Shared App Layout Classes ===== */
.macos-sidebar-nav {

    width: 56px;
    background: #f5f5f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
    flex-shrink: 0;
    border-right: 1px solid rgba(0,0,0,0.06);

}
.macos-sidebar-item {

    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;
    color: #999;
    position: relative;

}
.macos-sidebar-item:hover {
 background: rgba(0,0,0,0.04); color: #666; 
}
.macos-sidebar-item.active {
 background: rgba(0,0,0,0.08); color: #333; 
}
.macos-sidebar-item svg {
 width: 20px; height: 20px; 
}
.macos-panel {

    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: #fff;

}
.macos-panel-flex {

    flex: 2;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fff;

}
.macos-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    background: #FF3B30;
    color: #fff;

}
.macos-seg-btn {

    padding: 5px 12px;
    border: 1px solid #e5e5ea;
    background: #fff;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.macos-seg-btn:hover {
 background: #f5f5f7; color: #333; 
}
.macos-seg-btn.active {
 background: #333; color: #fff; border-color: #333; 
}
.macos-mail-folder-list {

    width: 180px;
    background: #f5f5f7;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid rgba(0,0,0,0.06);
    overflow-y: auto;

}

/* ===== WeChat App ===== */
.wechat-sidebar-nav {

    background: #2e2e2e;
    border-right: 1px solid rgba(255,255,255,0.06);

}
.wechat-sidebar-item {

    color: rgba(255,255,255,0.5);

}
.wechat-sidebar-item:hover {
 background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); 
}
.wechat-sidebar-item.active {
 background: rgba(255,255,255,0.12); color: #07C160; 
}
.wechat-nav-icon {
 width: 22px; height: 22px; 
}
.wechat-nav-icon svg {
 width: 22px; height: 22px; 
}
.wechat-avatar-letter {

    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;

}
.wechat-avatar-letter[data-color="1"] {
 background: linear-gradient(135deg, #07C160, #06AD56); 
}
.wechat-avatar-letter[data-color="2"] {
 background: linear-gradient(135deg, #576B95, #4A5D82); 
}
.wechat-avatar-letter[data-color="3"] {
 background: linear-gradient(135deg, #FA9D3B, #E88D2B); 
}
.wechat-avatar-letter[data-color="4"] {
 background: linear-gradient(135deg, #7C4DFF, #6B3CE6); 
}
.wechat-avatar-letter[data-color="5"] {
 background: linear-gradient(135deg, #FF6034, #E8552B); 
}
.wechat-avatar-letter[data-color="6"] {
 background: linear-gradient(135deg, #1E88E5, #1976D2); 
}
.wechat-search-box {

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    margin: 8px;
    color: rgba(0,0,0,0.3);

}
.wechat-search-box svg {
 width: 16px; height: 16px; flex-shrink: 0; 
}
.wechat-search-box input {

    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 16px;
    color: #333;

}
.wechat-search-box input::placeholder {
 color: rgba(0,0,0,0.25); 
}
.wechat-chat-item {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(0,0,0,0.04);

}
.wechat-chat-item:hover {
 background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); 
}
.wechat-chat-item.active {
 background: rgba(7,193,96,0.08); 
}
.wechat-chat-info {
 flex: 1; min-width: 0; 
}
.wechat-chat-name {
 font-size: 14px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.wechat-chat-msg {
 font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; 
}
.wechat-chat-time {
 font-size: 11px; color: #bbb; 
}
.wechat-unread-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #F44336;
    color: #fff;
    font-size: 11px;
    font-weight: 600;

}
.wechat-placeholder {

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.2);
    font-size: 14px;

}
.wechat-detail-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);

}
.wechat-detail-name {
 font-size: 15px; font-weight: 600; color: #333; 
}
.wechat-detail-actions {
 display: flex; gap: 16px; 
}
.wechat-detail-action {
 width: 20px; height: 20px; color: #999; cursor: pointer; 
}
.wechat-detail-action svg {
 width: 20px; height: 20px; 
}
.wechat-msg-area {

    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;

}
.wechat-msg-bubble {

    max-width: 70%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;

}
.wechat-msg-self {

    align-self: flex-end;
    background: #07C160;
    color: #fff;
    border-bottom-right-radius: 4px;

}
.wechat-msg-other {

    align-self: flex-start;
    background: #fff;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);

}
.wechat-input-bar {

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: #fff;

    box-shadow: var(--glass-shadow-inset);
}
.wechat-input-icon {

    width: 24px;
    height: 24px;
    color: #999;
    cursor: pointer;
    flex-shrink: 0;

    box-shadow: var(--glass-shadow-inset);
}
.wechat-input-icon svg {
 width: 24px; height: 24px; 
    box-shadow: var(--glass-shadow-inset);
}
.wechat-input-bar input {

    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 6px 0;
    background: none;

    box-shadow: var(--glass-shadow-inset);
}
.wechat-send-btn {

    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.wechat-send-btn:hover {
 background: rgba(255, 255, 255, 0.18);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); 

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.wechat-contact-item {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);

}
.wechat-contact-item:hover {
 background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); 
}
.wechat-contact-name {
 font-size: 14px; color: #333; 
}
.wechat-menu-item {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);

}
.wechat-menu-item:hover {
 background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); 
}
.wechat-menu-icon {
 width: 22px; height: 22px; color: #07C160; 
}
.wechat-menu-icon svg {
 width: 22px; height: 22px; 
}
.wc-typing-indicator {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);

}
.wc-typing-dots span {

    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
    animation: wcTypingBounce 1.4s infinite ease-in-out;

}
.wc-typing-dots span:nth-child(1) {
 animation-delay: 0s; 
}
.wc-typing-dots span:nth-child(2) {
 animation-delay: 0.2s; 
}
.wc-typing-dots span:nth-child(3) {
 animation-delay: 0.4s; 
}@keyframes wcTypingBounce {

    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }

}
.wc-group-typing-name {

    font-size: 11px;
    color: #999;
    margin-bottom: 2px;

}

/* ===== Bilibili App ===== */
.bili-sidebar-nav {

    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.06);

}
.bili-sidebar-item {

    color: #999;

}
.bili-sidebar-item:hover {
 background: rgba(0,0,0,0.04); color: #333; 
}
.bili-sidebar-item.active {
 background: rgba(251,114,153,0.08); color: #FB7299; 
}
.bili-nav-icon {
 width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; 
}
.bili-nav-icon svg {
 width: 22px; height: 22px; 
}
.bili-avatar-letter {

    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;

}
.bili-avatar-letter[data-color="1"] {
 background: linear-gradient(135deg, #FB7299, #e5274c); 
}
.bili-avatar-letter[data-color="2"] {
 background: linear-gradient(135deg, #00A1D6, #0088B5); 
}
.bili-avatar-letter[data-color="3"] {
 background: linear-gradient(135deg, #FA9D3B, #E88D2B); 
}
.bili-avatar-letter[data-color="4"] {
 background: linear-gradient(135deg, #7C4DFF, #6B3CE6); 
}
.bili-avatar-letter[data-color="5"] {
 background: linear-gradient(135deg, #3B82F6, #2B72E6); 
}
.bili-avatar-letter[data-color="6"] {
 background: linear-gradient(135deg, #07C160, #05A04E); 
}
.bili-seg-btn {

    border-color: #e5e5ea;
    background: #fff;
    color: #666;

}
.bili-seg-btn:hover {
 background: #f5f5f7; color: #333; 
}
.bili-seg-btn.active {
 background: #FB7299; color: #fff; border-color: #FB7299; 
}
.bili-video-grid {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;

}
.bili-video-card {

    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;

}
.bili-video-card:hover {
 transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}
.bili-video-cover {

    position: relative;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}
.bili-video-duration {

    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;

}
.bili-video-cover-play {

    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;

}
.bili-video-card:hover .bili-video-cover-play {
 opacity: 1; 
}
.bili-video-cover-play svg {
 width: 20px; height: 20px; color: #FB7299; 
}
.bili-video-title {

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #333;

}
.bili-video-meta {

    display: flex;
    align-items: center;
    margin-top: 4px;
    font-size: 12px;
    color: #999;

}
.bili-video-meta-icon {

    display: inline-flex;
    align-items: center;
    gap: 3px;

}
.bili-video-meta-icon svg {
 width: 14px; height: 14px; 
}
.bili-detail-player {

    position: relative;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}
.bili-detail-play-btn {

    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;

}
.bili-detail-play-btn:hover {
 transform: scale(1.1); 
}
.bili-detail-play-btn svg {
 width: 28px; height: 28px; color: #FB7299; 
}
.bili-detail-action {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid #e5e5ea;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.bili-detail-action:hover {
 border-color: #FB7299; color: #FB7299; 
}
.bili-action-icon {
 display: inline-flex; align-items: center; 
}
.bili-action-icon svg {
 width: 16px; height: 16px; 
}
.bili-up-row {

    display: flex;
    align-items: center;
    gap: 10px;

}
.bili-follow-btn {

    padding: 6px 16px;
    border: 1px solid #FB7299;
    background: #fff;
    color: #FB7299;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.bili-follow-btn:hover {
 background: #FB7299; color: #fff; 
}
.bili-comment-item {

    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);

}
.bili-dynamic-card {

    padding: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);

}
.bili-dynamic-img {

    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    margin-top: 8px;
    background: #f0f0f5;

}
.bili-msg-item {

    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);

}

/* ===== Douyin App ===== */
.douyin-app {

    display: flex;
    height: 100%;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
    overflow: hidden;

}
.dy-sidebar {

    width: 72px;
    background: #121212;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto;

}
.dy-sidebar-logo {

    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.dy-sidebar-logo svg {
 width: 28px; height: 28px; fill: #fff; 
}
.dy-sidebar-nav {

    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 0 6px;

}
.dy-sidebar-divider {

    width: 32px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 6px 0;

}
.dy-sidebar-categories {

    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 0 6px;

}
.dy-sidebar-publish {

    margin-top: auto;
    padding: 8px;

}
.dy-publish-btn {

    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FE2C55, #25F4EE);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;

}
.dy-publish-btn:hover {
 transform: scale(1.05); 
}
.dy-publish-btn svg {
 width: 20px; height: 20px; 
}
.dy-nav-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;
    color: rgba(255,255,255,0.5);

}
.dy-nav-item:hover {
 background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); 
}
.dy-nav-item.active {
 color: #fff; background: rgba(255,255,255,0.1); 
}
.dy-nav-icon {
 width: 20px; height: 20px; 
}
.dy-nav-icon svg {
 width: 20px; height: 20px; 
}
.dy-nav-label {
 font-size: 10px; white-space: nowrap; 
}
.dy-main {

    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;

}
.dy-video-view,
.dy-profile-view,
.dy-friends-view,
.dy-messages-view {

    position: absolute;
    inset: 0;
    display: none;
    overflow-y: auto;

}
.dy-video-view.active,
.dy-profile-view.active,
.dy-friends-view.active,
.dy-messages-view.active {

    display: flex;

}
.dy-video-player {

    position: relative;
    flex: 1;
    overflow: hidden;
    transition: opacity 0.15s;

}
.dy-video-bg {

    position: absolute;
    inset: 0;
    transition: background 0.3s;

}
.dy-lottie-layer {

    position: absolute;
    inset: 0;
    pointer-events: none;

}
.dy-subtitle {

    position: absolute;
    bottom: 120px;
    left: 16px;
    right: 80px;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    line-height: 1.5;
    pointer-events: none;

}
.dy-blur-glow {

    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;
    pointer-events: none;

}
.dy-video-info {

    position: absolute;
    bottom: 60px;
    left: 16px;
    right: 80px;
    z-index: 2;

}
.dy-user-row {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

}
.dy-avatar-letter {

    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;

}
.dy-avatar-letter[data-color="1"] {
 background: linear-gradient(135deg, #FE2C55, #e5274c); 
}
.dy-avatar-letter[data-color="2"] {
 background: linear-gradient(135deg, #25F4EE, #15e4de); 
}
.dy-avatar-letter[data-color="3"] {
 background: linear-gradient(135deg, #FA9D3B, #E88D2B); 
}
.dy-avatar-letter[data-color="4"] {
 background: linear-gradient(135deg, #8B5CF6, #7B4CE6); 
}
.dy-avatar-letter[data-color="5"] {
 background: linear-gradient(135deg, #3B82F6, #2B72E6); 
}
.dy-avatar-letter[data-color="6"] {
 background: linear-gradient(135deg, #07C160, #05A04E); 
}
.dy-avatar-letter.ai-anchor {
 box-shadow: 0 0 0 2px #FE2C55, 0 0 8px rgba(254,44,85,0.4); 
}
.dy-username {

    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;

}
.dy-ai-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: 4px;
    background: linear-gradient(135deg, #FE2C55, #8B5CF6);
    font-size: 10px;
    font-weight: 700;

}
.dy-ai-tag {

    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(254,44,85,0.2);
    font-size: 11px;
    color: #FE2C55;

}
.dy-follow-btn {

    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.dy-follow-btn.followed {
 border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); 
}
.dy-desc {

    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;

}
.dy-tags {
 color: rgba(37,244,238,0.8); font-size: 13px; 
}
.dy-music-row {

    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);

}
.dy-music-disc {
 width: 14px; height: 14px; 
}
.dy-music-disc svg {
 width: 14px; height: 14px; 
}
.dy-video-actions {

    position: absolute;
    right: 12px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 2;

}
.dy-action-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;

}
.dy-action-icon {

    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;

}
.dy-action-icon svg {
 width: 28px; height: 28px; 
}
.dy-action-icon.liked {
 color: #FE2C55; 
}
.dy-action-icon.liked svg {
 fill: #FE2C55; stroke: #FE2C55; 
}
.dy-action-icon.bookmarked {
 color: #FA9D3B; 
}
.dy-action-count {
 font-size: 11px; color: rgba(255,255,255,0.7); 
}
.dy-like-bounce {
 animation: dyLikeBounce 0.3s ease; 
}@keyframes dyLikeBounce {

    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }

}
.dy-video-nav {

    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;

}
.dy-nav-up, .dy-nav-down {

    padding: 6px 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
    white-space: nowrap;

}
.dy-nav-up:hover, .dy-nav-down:hover {
 background: rgba(255,255,255,0.2); 
}
.dy-nav-up svg, .dy-nav-down svg {
 width: 14px; height: 14px; 
}
.dy-profile-view {
 flex-direction: column; background: #121212; 
}
.dy-profile-header {
 padding: 16px; 
}
.dy-profile-top {
 display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; 
}
.dy-profile-back, .dy-profile-menu {
 width: 28px; height: 28px; color: #fff; cursor: pointer; 
}
.dy-profile-back svg, .dy-profile-menu svg {
 width: 24px; height: 24px; 
}
.dy-profile-info {
 display: flex; align-items: center; gap: 14px; margin-bottom: 16px; 
}
.dy-profile-avatar {

    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: #fff;

}
.dy-profile-name-area {
 flex: 1; 
}
.dy-profile-nickname {
 font-size: 18px; font-weight: 600; 
}
.dy-profile-id {
 font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; 
}
.dy-profile-stats {
 display: flex; gap: 24px; margin-bottom: 16px; 
}
.dy-profile-stat {
 text-align: center; 
}
.dy-profile-stat-value {
 font-size: 16px; font-weight: 600; 
}
.dy-profile-stat-label {
 font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; 
}
.dy-profile-edit-btn {

    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;

}
.dy-profile-tabs {
 display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); 
}
.dy-profile-tab {

    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    border-bottom: 2px solid transparent;

}
.dy-profile-tab.active {
 color: #fff; border-bottom-color: #FE2C55; 
}
.dy-profile-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;

}
.dy-profile-video {
 position: relative; aspect-ratio: 9/12; 
}
.dy-profile-video-bg {

    position: absolute;
    inset: 0;
    border-radius: 2px;

}
.dy-profile-video-plays {

    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;

}
.dy-profile-video-plays svg {
 width: 12px; height: 12px; 
}
.dy-sub-page-header {

    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);

}
.dy-sub-page-title {
 font-size: 16px; font-weight: 600; 
}
.dy-sub-page-content {
 flex: 1; display: flex; align-items: center; justify-content: center; 
}
.dy-empty-state {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.3);
    font-size: 14px;

}
.dy-empty-state svg {
 width: 40px; height: 40px; 
}
.dy-comment-panel {

    width: 320px;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-left: 1px solid rgba(255,255,255,0.06);
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.3s;

}
.dy-comment-panel.hidden {
 width: 0; overflow: hidden; border: none; 
}
.dy-comment-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);

}
.dy-comment-title {
 font-size: 14px; font-weight: 600; 
}
.dy-comment-sort {
 font-size: 12px; color: rgba(255,255,255,0.5); cursor: pointer; 
}
.dy-comment-list {

    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;

}
.dy-comment-item {

    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);

}
.dy-comment-avatar {

    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;

}
.dy-comment-body {
 flex: 1; min-width: 0; 
}
.dy-comment-user {
 font-size: 12px; color: rgba(255,255,255,0.5); 
}
.dy-comment-text {
 font-size: 13px; margin-top: 3px; line-height: 1.4; 
}
.dy-comment-meta {

    display: flex;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);

}
.dy-comment-like {

    display: inline-flex;
    align-items: center;
    gap: 3px;

}
.dy-comment-like svg {
 width: 12px; height: 12px; 
}
.dy-comment-input-area {

    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);

}
.dy-comment-input {

    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 16px;
    outline: none;

}
.dy-comment-input:focus {
 border-color: rgba(255,255,255,0.2); 
}
.dy-comment-send {

    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #FE2C55;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}
.dy-comment-send svg {
 width: 18px; height: 18px; 
}
.dy-publish-overlay {

    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;

}
.dy-publish-overlay.open {
 opacity: 1; pointer-events: auto; 
}
.dy-publish-card {

    background: #1a1a1a;
    border-radius: 16px;
    padding: 24px;
    width: 360px;
    max-width: 90%;
    position: relative;

}
.dy-publish-close {

    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;

}
.dy-publish-close svg {
 width: 20px; height: 20px; 
}
.dy-publish-title {
 font-size: 18px; font-weight: 600; margin-bottom: 16px; 
}
.dy-anchor-auto-btn {

    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #FE2C55, #8B5CF6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    transition: opacity 0.2s;

}
.dy-anchor-auto-btn:hover {
 opacity: 0.9; 
}
.dy-publish-divider {

    text-align: center;
    margin: 16px 0;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.1);

}
.dy-publish-divider span {

    position: relative;
    top: -10px;
    background: #1a1a1a;
    padding: 0 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);

}
.dy-publish-label {
 font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 8px; 
}
.dy-publish-input {

    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 16px;

}
.dy-publish-input:focus {
 border-color: rgba(255,255,255,0.2); 
}
.dy-publish-options {
 display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; 
}
.dy-publish-option {

    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.dy-publish-option:hover {
 border-color: rgba(255,255,255,0.3); color: #fff; 
}
.dy-publish-option.selected {
 background: #FE2C55; border-color: #FE2C55; color: #fff; 
}
.dy-publish-submit {

    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #FE2C55, #25F4EE);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;

}
.dy-publish-submit:hover {
 opacity: 0.9; 
}
.dy-create-progress {
 margin-top: 12px; 
}
.dy-progress-bar {

    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;

}
.dy-progress-fill {

    height: 100%;
    background: linear-gradient(90deg, #FE2C55, #25F4EE);
    border-radius: 2px;
    transition: width 0.3s;

}
.dy-progress-text {
 font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; 
}
.dy-anchor-notification {

    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    background: rgba(30,30,30,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    z-index: 20;
    transition: transform 0.3s ease;
    cursor: pointer;

}
.dy-anchor-notification.show {
 transform: translateX(-50%) translateY(0); 
}
.dy-anchor-notif-icon {
 font-size: 18px; 
}
.dy-anchor-notif-text {
 color: rgba(255,255,255,0.8); 
}

/* ===== Mail App ===== */
.mail-folder-header {

    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid rgba(0,0,0,0.06);

}
.mail-folder-item {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    color: #333;
    font-size: 14px;

}
.mail-folder-item:hover {
 background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); 
}
.mail-folder-item.active {
 background: rgba(var(--theme-primary-rgb),0.08); color: var(--theme-primary); 
}
.mail-folder-icon {
 width: 18px; height: 18px; flex-shrink: 0; 
}
.mail-folder-icon svg {
 width: 18px; height: 18px; 
}
.mail-badge-count {

    background: #FF3B30;
    color: #fff;
    font-size: 11px;
    margin-left: auto;

}
.mail-compose-btn {

    width: 100%;
    padding: 10px;
    border: none;
    background: var(--theme-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.mail-compose-btn:hover {
 background: var(--color-neon-deep); 

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.mail-compose-btn svg {
 width: 16px; height: 16px; 
}
.mail-list-header {

    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid rgba(0,0,0,0.06);

}

.mail-email-item {

    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    transition: background 0.15s;

}
.mail-email-item:hover {
 background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); 
}
.mail-email-item.active {
 background: rgba(var(--theme-primary-rgb),0.06); 
}
.mail-email-item.unread {
 background: rgba(var(--theme-primary-rgb),0.03); 
}
.mail-email-item-top {
 display: flex; gap: 10px; 
}
.mail-email-item-info {
 flex: 1; min-width: 0; 
}
.mail-email-sender {
 font-size: 14px; font-weight: 500; color: #333; 
}
.mail-email-time {
 font-size: 12px; color: #999; margin-left: auto; 
}
.mail-email-subject {

    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;

}
.mail-avatar-letter {

    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;

}
.mail-avatar-letter[data-color="1"] {
 background: linear-gradient(135deg, var(--theme-primary), var(--color-neon-deep)); 
}
.mail-avatar-letter[data-color="2"] {
 background: linear-gradient(135deg, #34C759, #248A3D); 
}
.mail-avatar-letter[data-color="3"] {
 background: linear-gradient(135deg, #FF9500, #E88D2B); 
}
.mail-avatar-letter[data-color="4"] {
 background: linear-gradient(135deg, #AF52DE, #9B30D9); 
}
.mail-avatar-letter[data-color="5"] {
 background: linear-gradient(135deg, #FF2D55, #E0234B); 
}
.mail-avatar-letter[data-color="6"] {
 background: linear-gradient(135deg, #5AC8FA, #40A9E0); 
}
.mail-unread-dot {

    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary);
    margin-right: 6px;

}
.mail-detail-placeholder {

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.2);
    font-size: 14px;

}
.mail-detail-not-found {
 padding: 20px; color: #999; text-align: center; 
}
.mail-detail-subject {
 font-size: 18px; font-weight: 600; color: #333; margin-bottom: 12px; 
}
.mail-detail-header {
 display: flex; align-items: center; gap: 10px; margin-bottom: 16px; 
}
.mail-detail-sender-avatar {

    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;

}
.mail-detail-sender-avatar[data-color="1"] {
 background: linear-gradient(135deg, var(--theme-primary), var(--color-neon-deep)); 
}
.mail-detail-sender-avatar[data-color="2"] {
 background: linear-gradient(135deg, #34C759, #248A3D); 
}
.mail-detail-sender-avatar[data-color="3"] {
 background: linear-gradient(135deg, #FF9500, #E88D2B); 
}
.mail-detail-sender-avatar[data-color="4"] {
 background: linear-gradient(135deg, #AF52DE, #9B30D9); 
}
.mail-detail-sender-avatar[data-color="5"] {
 background: linear-gradient(135deg, #FF2D55, #E0234B); 
}
.mail-detail-sender-avatar[data-color="6"] {
 background: linear-gradient(135deg, #5AC8FA, #40A9E0); 
}
.mail-detail-sender-info {
 flex: 1; 
}
.mail-detail-sender-name {
 font-size: 14px; font-weight: 500; color: #333; 
}
.mail-detail-sender-email {
 font-size: 12px; color: #999; 
}
.mail-detail-date {
 font-size: 12px; color: #999; 
}
.mail-detail-body {

    font-size: 14px;
    line-height: 1.6;
    color: #333;
    white-space: pre-wrap;

}
.mail-toolbar {

    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex-wrap: wrap;
    position: relative;

}
.mail-toolbar-btn {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.mail-toolbar-btn:hover {
 background: #f5f5f7; 

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.mail-toolbar-btn-icon {
 display: inline-flex; 
}
.mail-toolbar-btn-icon svg {
 width: 14px; height: 14px; 
}
.mail-ai-reply-wrapper {
 position: relative; 
}
.mail-ai-reply-btn {
 border-color: var(--glass-text); color: var(--glass-text); 
}
.mail-ai-reply-btn:hover {
 background: transparent; 

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.mail-ai-reply-dropdown {

    position: absolute;
    bottom: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 140px;
    display: none;
    z-index: 10;
    overflow: hidden;

}
.mail-ai-reply-dropdown.show {
 display: block; 
}
.mail-ai-reply-option {

    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;

}
.mail-ai-reply-option:hover {
 background: #f5f5f7; 
}
.mail-ai-summary-btn {

    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: var(--glass-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.2s;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);}
.mail-ai-summary-btn:hover {
 opacity: 1; 
}
.mail-ai-summary-btn svg {
 width: 16px; height: 16px; 
}
.mail-ai-summary-area {

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;

}
.mail-ai-summary-area.show {
 max-height: 200px; 
}
.mail-ai-summary-content {

    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(var(--theme-primary-rgb),0.04);
    border-radius: 8px;
    margin: 4px 0;
    font-size: 13px;
    color: #333;
    line-height: 1.4;

}
.mail-ai-summary-icon {
 color: var(--theme-primary); flex-shrink: 0; 
}
.mail-ai-summary-icon svg {
 width: 16px; height: 16px; 
}
.mail-ai-summary-loading,
.mail-ai-summary-error {

    padding: 8px 12px;
    font-size: 13px;
    color: #999;

}
.mail-ai-summary-error {
 color: #FF3B30; 
}
.mail-ai-loading-overlay {

    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;

}
.mail-ai-loading-content {

    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;

}
.mail-ai-loading-spinner {

    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e5e5ea;
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: mailSpin 0.8s linear infinite;

}@keyframes mailSpin {

    to { transform: rotate(360deg); }

}
.mail-attachment-card {

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f7;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: #333;

}
.mail-attachment-card svg {
 width: 16px; height: 16px; color: #999; 
}
.mail-attachment-size {
 color: #999; 
}
.mail-compose-field {

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);

}
.mail-compose-field label {
 font-size: 13px; color: #999; white-space: nowrap; 
}
.mail-compose-field input {

    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    background: none;

}
.mail-compose-body {

    flex: 1;
    padding: 12px;
    outline: none;
    font-size: 14px;
    line-height: 1.5;
    overflow-y: auto;
    white-space: pre-wrap;

}
.mail-compose-body:empty::before {

    content: attr(data-placeholder);
    color: #ccc;

}
.mail-compose-footer {

    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(0,0,0,0.06);

}
.mail-compose-send {

    padding: 6px 16px;
    border: none;
    background: var(--theme-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;

}
.mail-compose-ai-write {

    padding: 6px 16px;
    border: 1px solid var(--theme-primary);
    background: #fff;
    color: var(--theme-primary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;

}
.mail-compose-ai-write svg {
 width: 14px; height: 14px; 
}
.mail-compose-draft {

    padding: 6px 16px;
    border: 1px solid #e5e5ea;
    background: #fff;
    color: #666;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;

}
.mail-ai-compose-panel {

    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #f5f5f7;

}
.mail-ai-compose-input-row {
 display: flex; gap: 8px; 
    box-shadow: var(--glass-shadow-inset);
}
.mail-ai-compose-input {

    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    font-size: 16px;
    outline: none;

    box-shadow: var(--glass-shadow-inset);
}
.mail-ai-compose-input:focus {
 border-color: rgba(255, 255, 255, 0.55); 
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), var(--glass-shadow-inset);
}
.mail-ai-compose-go {

    padding: 8px 16px;
    border: none;
    background: var(--theme-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;

}
.mail-ai-compose-loading {

    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;

}
.mail-empty-state {

    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 14px;

}

/* ===== Tonghuashun App ===== */
.ths-sidebar-area {

    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    width: 100%;

}
.ths-sidebar-item {

    width: auto;
    height: auto;
    flex-direction: column;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 8px;

}
.ths-sidebar-tab-label {
 font-size: 10px; white-space: nowrap; 
}
.ths-nav-icon {
 width: 20px; height: 20px; 
}
.ths-nav-icon svg {
 width: 20px; height: 20px; 
}
.ths-content-area {

    flex: 1;
    overflow-y: auto;
    padding: 16px;

}
.ths-search-bar {

    display: flex;
    gap: 8px;
    margin-bottom: 16px;

}
.ths-search-bar input {

    flex: 1;
    padding: 8px 14px;
    border: 1px solid #252545;
    border-radius: 10px;
    background: #14142b;
    color: #e6edf3;
    font-size: 16px;
    outline: none;

}
.ths-search-bar input:focus {
 border-color: #3B82F6; 
}
.ths-search-bar input::placeholder {
 color: #555; 
}
.ths-search-btn {

    padding: 8px 14px;
    border: none;
    background: #3B82F6;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;

}
.ths-ai-panel {

    background: #14142b;
    border: 1px solid #252545;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;

}
.ths-ai-btn {

    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;

}
.ths-ai-btn:hover {
 opacity: 0.85; 
}
.ths-ai-analysis-btn {
 background: linear-gradient(135deg, #3B82F6, #8B5CF6); color: #fff; width: 100%; margin-top: 12px; 
}
.ths-ai-advice-btn {
 background: linear-gradient(135deg, #3B82F6, #8B5CF6); color: #fff; 
}
.ths-ai-news-btn {
 background: rgba(59,130,246,0.15); color: #3B82F6; font-size: 12px; padding: 4px 10px; 
}
.ths-index-card {

    background: #14142b;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;

}
.ths-index-name {
 font-size: 13px; color: #888; 
}
.ths-index-value {
 font-size: 28px; font-weight: 700; margin: 4px 0; 
}
.ths-index-change {
 font-size: 14px; display: flex; align-items: center; gap: 4px; 
}
.ths-index-sparkline {
 margin-top: 8px; 
}
.ths-section-title {
 font-size: 14px; font-weight: 600; color: #e6edf3; margin: 16px 0 10px; 
}
.ths-section-title-top {
 font-size: 14px; font-weight: 600; color: #e6edf3; margin: 16px 0 10px; 
}
.ths-stock-item {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #14142b;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;

}
.ths-stock-item:hover {
 background: #1a1a3e; 
}
.ths-stock-left {
 display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; 
}
.ths-stock-info {
 min-width: 0; 
}
.ths-stock-name {
 font-size: 14px; font-weight: 500; color: #e6edf3; 
}
.ths-stock-code {
 font-size: 11px; color: #888; margin-top: 1px; 
}
.ths-stock-sparkline {
 flex-shrink: 0; 
}
.ths-stock-right {
 text-align: right; flex-shrink: 0; 
}
.ths-stock-price {
 font-size: 14px; font-weight: 600; 
}
.ths-stock-change {
 font-size: 12px; display: flex; align-items: center; gap: 3px; justify-content: flex-end; 
}
.ths-sector-tag {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #14142b;
    border-radius: 20px;
    font-size: 13px;
    color: #e6edf3;

}
.ths-sector-arrow {
 display: inline-flex; 
}
.ths-sector-arrow svg {
 width: 10px; height: 10px; 
}
.ths-up {
 color: #FF4D4F; 
}
.ths-down {
 color: #00C853; 
}
.ths-detail-header {

    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;

}
.ths-detail-back {
 width: 28px; height: 28px; cursor: pointer; color: #e6edf3; 
}
.ths-detail-back svg {
 width: 24px; height: 24px; 
}
.ths-detail-title {
 font-size: 16px; font-weight: 600; flex: 1; 
}
.ths-detail-star {
 width: 28px; height: 28px; cursor: pointer; color: #888; 
}
.ths-detail-star.starred {
 color: #FA9D3B; 
}
.ths-detail-star svg {
 width: 24px; height: 24px; 
}
.ths-detail-price {
 font-size: 28px; font-weight: 700; 
}
.ths-detail-change {
 font-size: 14px; display: flex; align-items: center; gap: 4px; margin-bottom: 12px; 
}
.ths-kline-area {

    background: #14142b;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 12px;
    overflow: hidden;

}
.ths-kline-grid text {
 fill: #555; font-size: 8px; 
}
.ths-period-tabs {
 display: flex; gap: 6px; margin-bottom: 12px; 
}
.ths-period-btn {

    flex: 1;
    padding: 6px;
    border: 1px solid #252545;
    background: transparent;
    color: #888;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.ths-period-btn.active {
 background: #3B82F6; border-color: #3B82F6; color: #fff; 
}
.ths-data-row {

    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);

}
.ths-data-label {
 font-size: 13px; color: #888; 
}
.ths-data-value {
 font-size: 13px; color: #e6edf3; 
}
.ths-trade-btns {
 display: flex; gap: 10px; margin-top: 16px; 
}
.ths-buy-btn {

    flex: 1;
    padding: 12px;
    border: none;
    background: #FF4D4F;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;

}
.ths-sell-btn {

    flex: 1;
    padding: 12px;
    border: none;
    background: #00C853;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;

}
.ths-news-item {

    padding: 12px;
    background: #14142b;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;

}
.ths-news-title {
 font-size: 14px; font-weight: 500; color: #e6edf3; line-height: 1.4; 
}
.ths-news-meta {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: #888;

}
.ths-news-source {
 display: inline-flex; align-items: center; gap: 4px; 
}
.ths-news-source svg {
 width: 12px; height: 12px; 
}
.ths-ai-news-panel {

    margin-top: 8px;
    padding: 10px;
    background: rgba(59,130,246,0.08);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;

}
.ths-position-item {

    display: flex;
    align-items: center;

}
.ths-position-name {
 font-size: 13px; font-weight: 500; color: #e6edf3; 
}
.ths-position-code {
 font-size: 11px; color: #888; 
}
.ths-position-pnl-label {
 font-size: 11px; 
}
/* Mail Panel - Vintage Letter Style */
.mail-panel-overlay {

    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;

}
.mail-panel-overlay.active {

    display: flex;

}
.mail-panel-backdrop {

    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(var(--color-bg-dark-rgb),0.75) 0%, rgba(0,0,0,0.92) 100%);
    backdrop-filter: blur(6px);

}
.mail-panel-card {

    position: relative;
    z-index: 1;
    width: 90%;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(var(--color-bg-medium-rgb),0.97), rgba(var(--color-bg-dark-rgb),0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--glass-border-highlight);
    border-radius: 1.5vw;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 20px rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;

}
.mail-panel-title-bar {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5vh 2vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}
.mail-panel-title {

    display: flex;
    align-items: center;
    gap: 0.8vw;
    font-size: 1.8vw;
    font-weight: 700;
    color: var(--color-neon-cyan);

}
.mail-panel-close-btn {

    width: 3vw;
    height: 3vw;
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-highlight);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.8vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.mail-panel-close-btn:hover {

    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--color-neon-cyan);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.mail-panel-body {

    flex: 1;
    overflow-y: auto;
    padding: 1.2vh 1.2vw;

}
.mail-panel-list-container {

    /* list view */

}
.mail-panel-detail {

    display: none;
    /* detail view */

}
/* Mail List Items */
.mail-panel-empty {

    text-align: center;
    padding: 5vh 2vw;
    color: rgba(255, 255, 255, 0.4);

}
.mail-panel-empty-icon {

    font-size: 4vw;
    margin-bottom: 1vh;

}
.mail-panel-empty-text {

    font-size: 1.5vw;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5vh;

}
.mail-panel-item {

    display: flex;
    align-items: center;
    gap: 1vw;
    padding: 1vh 1.2vw;
    border-radius: 1vw;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;
    margin-bottom: 0.5vh;
    border: 1px solid transparent;

}
.mail-panel-item:hover {

    background: rgba(255, 255, 255, 0.08);
    border-color: var(--glass-border-highlight);

}
.mail-panel-item-icon {

    font-size: 2.2vw;
    flex-shrink: 0;

}
.mail-panel-item-content {

    flex: 1;
    min-width: 0;

}
.mail-panel-item-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3vh;

}
.mail-panel-item-from {

    font-size: 1.3vw;
    color: var(--color-neon-cyan);
    font-weight: 600;

}
.mail-panel-item-time {

    font-size: 1.1vw;
    color: rgba(255, 255, 255, 0.4);

}
.mail-panel-item-subject {

    font-size: 1.4vw;
    color: rgba(224,213,193,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.mail-panel-unread-dot {

    width: 0.6vw;
    height: 0.6vw;
    border-radius: 50%;
    background: var(--color-neon-cyan);
    flex-shrink: 0;
    box-shadow: 0 0 0.4vw rgba(255, 255, 255, 0.4);

}
/* Mail Detail View */
.mail-detail-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2vh;

}
.mail-detail-back-btn,
.mail-detail-delete-btn {

    padding: 0.5vh 1.2vw;
    border: 1px solid var(--glass-border);
    border-radius: 0.6vw;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3vw;
    cursor: pointer;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.mail-detail-back-btn:hover,
.mail-detail-delete-btn:hover {

    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--color-neon-cyan);

    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
}
.mail-detail-meta {

    margin-bottom: 1vh;

}
.mail-detail-from {

    font-size: 1.4vw;
    color: var(--color-neon-cyan);
    font-weight: 600;

}
.mail-detail-time {

    font-size: 1.2vw;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.3vh;

}
.mail-detail-subject {

    font-size: 1.6vw;
    font-weight: 700;
    color: rgba(224,213,193,0.9);
    margin-bottom: 1.2vh;
    padding-bottom: 0.8vh;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}
.mail-detail-body {

    font-size: 1.4vw;
    color: rgba(224,213,193,0.7);
    line-height: 1.7;
    white-space: pre-wrap;

}

/* ===== Supertonic 本地神经网络 TTS 配置面板 ===== */.tts-supertonic-config .settings-input {

    margin-bottom: 4px;

    box-shadow: var(--glass-shadow-inset);
}
.supertonic-status-row, .supertonic-cache-row, .supertonic-model-row {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;

}
.supertonic-status-label, .supertonic-cache-label {

    font-size: 13px;
    color: rgba(200,184,154,0.8);

}
.supertonic-status-badge {

    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;

}
.supertonic-status-badge.supported {

    background: rgba(129, 199, 132, 0.2);
    color: #81c784;

}
.supertonic-status-badge.unsupported {

    background: rgba(255, 183, 77, 0.2);
    color: #ffb74d;

}
.supertonic-cache-status {

    font-size: 13px;
    color: rgba(200,184,154,0.7);

}
.supertonic-download-btn, .supertonic-cache-btn {

    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-neon-cyan);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: transform, opacity, background-color, border-color, color, filter, box-shadow 0.2s;

}
.supertonic-download-btn:hover, .supertonic-cache-btn:hover {

    background: rgba(255, 255, 255, 0.15);

}
.supertonic-download-btn:disabled {

    opacity: 0.5;
    cursor: not-allowed;

}
.supertonic-download-btn.ready {

    background: rgba(129, 199, 132, 0.15);
    color: #81c784;
    border-color: rgba(129, 199, 132, 0.3);

}
/* Supertonic 下载进度条 */
.supertonic-progress-container {

    margin: 8px 0;

}
.supertonic-progress-bar {

    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;

}
.supertonic-progress-fill {

    height: 100%;
    background: linear-gradient(90deg, var(--color-neon-cyan), #e6c9a0);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;

}
.supertonic-progress-text {

    font-size: 12px;
    color: rgba(200,184,154,0.6);

}
/* TTS 按钮加载状态（模型下载中） */
.tts-btn-inline.tts-loading {

    color: var(--color-neon-cyan);

}
.tts-btn-inline.tts-loading .tts-spin-icon {

    animation: tts-spin 1s linear infinite;

}@keyframes tts-spin {

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

}

/* ===== Task 4: 子页面滚动条/按钮/可读性统一 ===== */

/* 1. 子页面可滚动容器统一细滚动条（对全局统一玻璃滚动条的显式补充） */
.settings-content::-webkit-scrollbar,
.npc-panel-content::-webkit-scrollbar,
.story-panel-content::-webkit-scrollbar,
.model-config-content::-webkit-scrollbar,
.reader-settings-content::-webkit-scrollbar,
.mc-content::-webkit-scrollbar,
.charlist-main::-webkit-scrollbar,
.chardetail-portrait-area::-webkit-scrollbar,
.chardetail-info-area::-webkit-scrollbar,
.dialogue-messages::-webkit-scrollbar,
.book-body::-webkit-scrollbar,
.mission-content::-webkit-scrollbar,
.memorial-content::-webkit-scrollbar,
.model-test-control-panel::-webkit-scrollbar,
.gacha-shop-panel::-webkit-scrollbar,
.gacha-ten-summary-list::-webkit-scrollbar,
.shelf-body::-webkit-scrollbar,
.reader-panel-content::-webkit-scrollbar,
.reader-toc-sidebar .reader-toc-list::-webkit-scrollbar,
.script-list-content::-webkit-scrollbar,
.script-filter-tags::-webkit-scrollbar,
.video-result-body::-webkit-scrollbar,
.wechat-msg-area::-webkit-scrollbar,
.dy-comment-list::-webkit-scrollbar,
.mail-compose-body::-webkit-scrollbar,
.mail-panel-body::-webkit-scrollbar,
.ths-content-area::-webkit-scrollbar,
.reader-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.settings-content::-webkit-scrollbar-track,
.npc-panel-content::-webkit-scrollbar-track,
.story-panel-content::-webkit-scrollbar-track,
.model-config-content::-webkit-scrollbar-track,
.reader-settings-content::-webkit-scrollbar-track,
.mc-content::-webkit-scrollbar-track,
.charlist-main::-webkit-scrollbar-track,
.chardetail-portrait-area::-webkit-scrollbar-track,
.chardetail-info-area::-webkit-scrollbar-track,
.dialogue-messages::-webkit-scrollbar-track,
.book-body::-webkit-scrollbar-track,
.mission-content::-webkit-scrollbar-track,
.memorial-content::-webkit-scrollbar-track,
.model-test-control-panel::-webkit-scrollbar-track,
.gacha-shop-panel::-webkit-scrollbar-track,
.gacha-ten-summary-list::-webkit-scrollbar-track,
.shelf-body::-webkit-scrollbar-track,
.reader-panel-content::-webkit-scrollbar-track,
.reader-toc-sidebar .reader-toc-list::-webkit-scrollbar-track,
.script-list-content::-webkit-scrollbar-track,
.script-filter-tags::-webkit-scrollbar-track,
.video-result-body::-webkit-scrollbar-track,
.wechat-msg-area::-webkit-scrollbar-track,
.dy-comment-list::-webkit-scrollbar-track,
.mail-compose-body::-webkit-scrollbar-track,
.mail-panel-body::-webkit-scrollbar-track,
.ths-content-area::-webkit-scrollbar-track,
.reader-body::-webkit-scrollbar-track {
    background: transparent;
}

.settings-content::-webkit-scrollbar-thumb,
.npc-panel-content::-webkit-scrollbar-thumb,
.story-panel-content::-webkit-scrollbar-thumb,
.model-config-content::-webkit-scrollbar-thumb,
.reader-settings-content::-webkit-scrollbar-thumb,
.mc-content::-webkit-scrollbar-thumb,
.charlist-main::-webkit-scrollbar-thumb,
.chardetail-portrait-area::-webkit-scrollbar-thumb,
.chardetail-info-area::-webkit-scrollbar-thumb,
.dialogue-messages::-webkit-scrollbar-thumb,
.book-body::-webkit-scrollbar-thumb,
.mission-content::-webkit-scrollbar-thumb,
.memorial-content::-webkit-scrollbar-thumb,
.model-test-control-panel::-webkit-scrollbar-thumb,
.gacha-shop-panel::-webkit-scrollbar-thumb,
.gacha-ten-summary-list::-webkit-scrollbar-thumb,
.shelf-body::-webkit-scrollbar-thumb,
.reader-panel-content::-webkit-scrollbar-thumb,
.reader-toc-sidebar .reader-toc-list::-webkit-scrollbar-thumb,
.script-list-content::-webkit-scrollbar-thumb,
.script-filter-tags::-webkit-scrollbar-thumb,
.video-result-body::-webkit-scrollbar-thumb,
.wechat-msg-area::-webkit-scrollbar-thumb,
.dy-comment-list::-webkit-scrollbar-thumb,
.mail-compose-body::-webkit-scrollbar-thumb,
.mail-panel-body::-webkit-scrollbar-thumb,
.ths-content-area::-webkit-scrollbar-thumb,
.reader-body::-webkit-scrollbar-thumb {
    background: var(--glass-scrollbar-thumb);
    border-radius: 9999px;
}

.settings-content::-webkit-scrollbar-thumb:hover,
.npc-panel-content::-webkit-scrollbar-thumb:hover,
.story-panel-content::-webkit-scrollbar-thumb:hover,
.model-config-content::-webkit-scrollbar-thumb:hover,
.reader-settings-content::-webkit-scrollbar-thumb:hover,
.mc-content::-webkit-scrollbar-thumb:hover,
.charlist-main::-webkit-scrollbar-thumb:hover,
.chardetail-portrait-area::-webkit-scrollbar-thumb:hover,
.chardetail-info-area::-webkit-scrollbar-thumb:hover,
.dialogue-messages::-webkit-scrollbar-thumb:hover,
.book-body::-webkit-scrollbar-thumb:hover,
.mission-content::-webkit-scrollbar-thumb:hover,
.memorial-content::-webkit-scrollbar-thumb:hover,
.model-test-control-panel::-webkit-scrollbar-thumb:hover,
.gacha-shop-panel::-webkit-scrollbar-thumb:hover,
.gacha-ten-summary-list::-webkit-scrollbar-thumb:hover,
.shelf-body::-webkit-scrollbar-thumb:hover,
.reader-panel-content::-webkit-scrollbar-thumb:hover,
.reader-toc-sidebar .reader-toc-list::-webkit-scrollbar-thumb:hover,
.script-list-content::-webkit-scrollbar-thumb:hover,
.script-filter-tags::-webkit-scrollbar-thumb:hover,
.video-result-body::-webkit-scrollbar-thumb:hover,
.wechat-msg-area::-webkit-scrollbar-thumb:hover,
.dy-comment-list::-webkit-scrollbar-thumb:hover,
.mail-compose-body::-webkit-scrollbar-thumb:hover,
.mail-panel-body::-webkit-scrollbar-thumb:hover,
.ths-content-area::-webkit-scrollbar-thumb:hover,
.reader-body::-webkit-scrollbar-thumb:hover {
    background: var(--glass-scrollbar-thumb-hover);
}

.settings-content,
.npc-panel-content,
.story-panel-content,
.model-config-content,
.reader-settings-content,
.mc-content,
.charlist-main,
.chardetail-portrait-area,
.chardetail-info-area,
.dialogue-messages,
.book-body,
.mission-content,
.memorial-content,
.model-test-control-panel,
.gacha-shop-panel,
.gacha-ten-summary-list,
.shelf-body,
.reader-panel-content,
.reader-toc-sidebar .reader-toc-list,
.script-list-content,
.script-filter-tags,
.video-result-body,
.wechat-msg-area,
.dy-comment-list,
.mail-compose-body,
.mail-panel-body,
.ths-content-area,
.reader-body {
    scrollbar-width: thin;
    scrollbar-color: var(--glass-scrollbar-thumb) transparent;
}

/* 2. 子页面按钮统一反馈兜底（不覆盖首页） */
:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body) button:hover,
:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body)
[class*="-btn"]:not([class*="-btn-bg"]):not([class*="-btn-label"]):not([class*="-btn-cost"]):not([class*="-btn-collection"]):not([class*="-indicator"]):hover {
    filter: brightness(1.08);
}

:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body) button:active,
:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body)
[class*="-btn"]:not([class*="-btn-bg"]):not([class*="-btn-label"]):not([class*="-btn-cost"]):not([class*="-btn-collection"]):not([class*="-indicator"]):active {
    transform: scale(0.97);
}

:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body) button:disabled,
:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body)
[class*="-btn"]:not([class*="-btn-bg"]):not([class*="-btn-label"]):not([class*="-btn-cost"]):not([class*="-btn-collection"]):not([class*="-indicator"]):disabled,
:is(.game-page, .reader-page, .gacha-page, .model-test-page, .character-chat-page,
    .character-list-page, .character-detail-page, .book-shelf-page, .chapter-mission-page,
    .settings-content, .npc-panel-content, .story-panel-content, .model-config-content,
    .reader-settings-content, .mc-content, .charlist-main, .chardetail-portrait-area,
    .chardetail-info-area, .dialogue-messages, .charchat-messages, .book-body,
    .mission-content, .memorial-content, .model-test-control-panel, .gacha-shop-panel,
    .gacha-ten-summary-list, .shelf-body, .reader-panel-content, .reader-toc-sidebar,
    .script-list-content, .script-filter-tags, .video-result-body, .wechat-msg-area,
    .dy-comment-list, .mail-compose-body, .mail-panel-body, .ths-content-area, .reader-body)
[class*="-btn"].disabled:not([class*="-btn-bg"]):not([class*="-btn-label"]):not([class*="-btn-cost"]):not([class*="-btn-collection"]):not([class*="-indicator"]) {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.4);
    cursor: not-allowed;
}

/* 3. 玻璃面板上的标题/主文字增加阴影，提升可读性 */
.npc-panel-title,
.story-panel-title,
.model-config-title,
.mc-title,
.reader-content-title,
.reader-panel-title,
.script-list-title,
.video-result-title,
.charlist-title,
.chardetail-name,
.charchat-name,
.shelf-header-title,
.model-test-panel-header {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 次要说明文字统一为玻璃 muted 色，避免旧科技青色系与玻璃主题不一致 */



/* Performance overrides: disable backdrop-filter on small interactive elements */
.glass-btn, .glass-icon-btn, .glass-input, .glass-card, .card,
.settings-close-btn, .npc-panel-close-btn, .settings-input, .settings-save-btn, .settings-select,
.chardetail-back-btn, .chardetail-chat-btn, .charchat-back-btn, .charchat-more-btn,
.charchat-input, .charchat-send-btn, .game-back-btn, .game-send-btn,
.book-back-btn, .reader-back-btn, .model-test-close-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Performance: disable heavy backdrop-filter on mobile to avoid GPU compositing bottlenecks */
@media (max-width: 768px) {
    .glass-panel, .glass-panel-dark, .card,
    .settings-content, .npc-panel-content, .reader-settings-content,
    .charchat-char-info,
    .charchat-header, .book-header, .book-footer,
    .reader-header, .reader-footer, .model-test-control-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===== Task 6: sharpen text inside glass panels ===== */
/* Keep the glass blur on the background layer; promote text/content to its
   own compositing layer and restore subpixel anti-aliasing so text stays sharp
   without removing the glass visual effect. */

.glass-panel,
.glass-panel-dark,
.glass-card,
.card,
.settings-content,
.npc-panel-content,
.reader-settings-content,
.charchat-char-info,
.charchat-header,
.game-header,
.game-footer,
.book-header,
.book-footer,
.reader-header,
.reader-footer,
.model-test-control-panel {
    isolation: isolate;
}

.glass-panel > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.glass-panel-dark > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.glass-card > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.card > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.settings-content > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.npc-panel-content > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.reader-settings-content > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.charchat-char-info > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.charchat-header > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.game-header > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.game-footer > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.book-header > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.book-footer > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.reader-header > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.reader-footer > *:not(svg):not(img):not(video):not(canvas):not(iframe),
.model-test-control-panel > *:not(svg):not(img):not(video):not(canvas):not(iframe) {
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    transform: translateZ(0);
}

/* ===== Mobile layout adjustments for gacha / character list / detail ===== */
@media (max-width: 480px) {
    .charlist-header {
        padding: clamp(0.5rem, 1vh, 0.75rem) clamp(0.5rem, 2vw, 1rem);
    }
    .charlist-back-btn span {
        display: none;
    }
    .charlist-subtitle {
        display: none;
    }
}

/* ================================================================
   Task 7: 角色列表与详情页样式覆盖 - 书信/Galgame 风格
   ================================================================ */

/* ---------- 角色列表页 ---------- */
.character-list-page {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.character-list-page .charlist-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.character-list-page .charlist-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.character-list-page .charlist-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.85) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

.character-list-page .charlist-header {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.25rem clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(0.75rem, 1.8vh, 1.25rem) clamp(1rem, 3vw, 2rem);
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-light);
    background: linear-gradient(180deg, rgba(26, 14, 8, 0.85) 0%, rgba(26, 14, 8, 0.4) 100%);
    backdrop-filter: blur(6px);
}

.character-list-page .charlist-back-btn {
    grid-column: 1;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 1rem;
    background: rgba(61, 36, 21, 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-gold-light);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}

.character-list-page .charlist-back-btn:hover {
    background: rgba(61, 36, 21, 0.85);
    border-color: var(--color-gold-primary);
    color: var(--color-gold-highlight);
    box-shadow: var(--shadow-gold);
    transform: translateX(-2px);
}

.character-list-page .charlist-title-group {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.character-list-page .charlist-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    background: linear-gradient(90deg, var(--color-gold-primary) 0%, var(--color-gold-highlight) 50%, var(--color-gold-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(212, 165, 116, 0.25);
}

.character-list-page .charlist-subtitle {
    font-family: var(--font-elegant);
    font-size: clamp(0.5rem, 0.9vw, 0.75rem);
    letter-spacing: 0.25em;
    color: var(--color-gold-muted);
    text-transform: uppercase;
}

.character-list-page .charlist-count {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--color-gold-light);
    font-weight: 600;
}

.character-list-page .charlist-count-unit {
    color: var(--color-text-dark);
    font-size: clamp(0.625rem, 1vw, 0.8125rem);
    font-weight: 400;
}

.character-list-page .charlist-progress {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: 120px;
}

.character-list-page .charlist-progress-text {
    font-size: clamp(0.625rem, 1vw, 0.75rem);
    color: var(--color-text-dark);
    letter-spacing: 0.05em;
}

.character-list-page .charlist-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(26, 14, 8, 0.85);
    border: 1px solid var(--color-border-light);
    border-radius: 2px;
    overflow: hidden;
}

.character-list-page .charlist-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-gold-dark) 0%, var(--color-gold-primary) 50%, var(--color-gold-light) 100%);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(212, 165, 116, 0.4);
    transition: width 0.6s ease;
}

.character-list-page .charlist-filter-toggle {
    grid-column: 4;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    background: rgba(61, 36, 21, 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-gold-light);
    font-family: var(--font-body);
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}

.character-list-page .charlist-filter-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.character-list-page .charlist-filter-toggle:hover {
    background: rgba(61, 36, 21, 0.85);
    border-color: var(--color-gold-primary);
    color: var(--color-gold-highlight);
    box-shadow: var(--shadow-gold);
    transform: translateY(-1px);
}

.character-list-page .charlist-filter-toggle.active,
.character-list-page .charlist-filter-toggle[aria-expanded="true"] {
    border-color: var(--color-gold-primary);
    background: rgba(212, 165, 116, 0.18);
    color: var(--color-gold-highlight);
    box-shadow: 0 0 12px rgba(212, 165, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.character-list-page .charlist-main {
    position: relative;
    z-index: 5;
    flex: 1;
    overflow-y: auto;
    padding: clamp(1rem, 2.5vh, 1.75rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vh, 3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vh, 1.25rem);
}

.character-list-page .charlist-filter-panel {
    position: absolute;
    top: 0.75rem;
    right: 0;
    z-index: 10;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    width: min(22rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background:
        linear-gradient(180deg, rgba(26, 14, 8, 0.96) 0%, rgba(42, 24, 16, 0.94) 100%),
        radial-gradient(circle at 50% 0%, rgba(212, 165, 116, 0.06), transparent 60%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.character-list-page .charlist-filter-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.character-list-page .charlist-filter-group {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

.character-list-page .charlist-filter-group:last-child {
    border-bottom: none;
}

.character-list-page .charlist-filter-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
    font-size: clamp(0.6875rem, 1vw, 0.8125rem);
    letter-spacing: 0.1em;
    color: var(--color-text-dark);
}

.character-list-page .charlist-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.375rem, 1vw, 0.625rem);
}

.character-list-page .charlist-sort-bar,
.character-list-page .charlist-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 0.75rem);
}

.character-list-page .charlist-sort-btn,
.character-list-page .charlist-rarity-btn,
.character-list-page .charlist-afflatus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.45rem 0.9rem;
    background: rgba(61, 36, 21, 0.55);
    border: 1px solid var(--color-border-light);
    border-radius: var(--glass-radius-full);
    color: var(--color-text-medium);
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1.1vw, 0.875rem);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.character-list-page .charlist-sort-btn:hover,
.character-list-page .charlist-rarity-btn:hover,
.character-list-page .charlist-afflatus-btn:hover {
    background: rgba(61, 36, 21, 0.8);
    border-color: var(--color-gold-muted);
    color: var(--color-gold-light);
    transform: translateY(-1px);
}

.character-list-page .charlist-sort-btn.active,
.character-list-page .charlist-rarity-btn.active,
.character-list-page .charlist-afflatus-btn.active {
    background: rgba(212, 165, 116, 0.18);
    border-color: var(--color-gold-primary);
    color: var(--color-gold-highlight);
    box-shadow: 0 0 12px rgba(212, 165, 116, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.character-list-page .charlist-card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    padding: 0.25rem 0;
}

.character-list-page .charlist-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 3 / 4;
    background: linear-gradient(180deg, rgba(61, 36, 21, 0.55) 0%, rgba(42, 24, 16, 0.75) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: charlist-card-fade-in 0.5s ease both;
}

.character-list-page .charlist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.5), transparent);
    z-index: 5;
}

.character-list-page .charlist-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.08);
}

.character-list-page .charlist-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-gold-muted);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(212, 165, 116, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.character-list-page .charlist-card.locked,
.character-list-page .charlist-card-locked {
    cursor: default;
    filter: grayscale(100%) brightness(0.65);
}

.character-list-page .charlist-card.locked:hover,
.character-list-page .charlist-card-locked:hover {
    transform: none;
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

.character-list-page .charlist-card.locked .charlist-card-portrait,
.character-list-page .charlist-card-locked .charlist-card-portrait {
    filter: grayscale(100%) brightness(0.55) blur(1px);
}

.character-list-page .charlist-card-portrait {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.character-list-page .charlist-card-portrait img,
.character-list-page .charlist-card-portrait svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.character-list-page .charlist-card:hover .charlist-card-portrait img,
.character-list-page .charlist-card:hover .charlist-card-portrait svg {
    transform: scale(1.05);
}

.character-list-page .charlist-card-afflatus {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 6;
    width: clamp(1.75rem, 3vw, 2.25rem);
    height: clamp(1.75rem, 3vw, 2.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(26, 14, 8, 0.75);
    border: 1px solid var(--color-border);
    color: var(--color-gold-light);
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-sm);
}

.character-list-page .charlist-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 3;
}

.character-list-page .charlist-card:hover .charlist-card-glow {
    opacity: 1;
}

.character-list-page .charlist-card.rarity-4 .charlist-card-glow {
    background: radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.18), transparent 70%);
    box-shadow: inset 0 0 24px rgba(255, 215, 0, 0.12), 0 0 18px rgba(255, 215, 0, 0.15);
    animation: rarity-gold-pulse 2.5s ease-in-out infinite;
}

.character-list-page .charlist-card.rarity-3 .charlist-card-glow {
    background: radial-gradient(circle at 50% 30%, rgba(192, 128, 224, 0.18), transparent 70%);
    box-shadow: inset 0 0 24px rgba(192, 128, 224, 0.12), 0 0 18px rgba(192, 128, 224, 0.15);
    animation: rarity-purple-pulse 2.5s ease-in-out infinite;
}

.character-list-page .charlist-card.rarity-2 .charlist-card-glow {
    background: radial-gradient(circle at 50% 30%, rgba(128, 176, 224, 0.18), transparent 70%);
    box-shadow: inset 0 0 24px rgba(128, 176, 224, 0.12), 0 0 18px rgba(128, 176, 224, 0.15);
    animation: rarity-blue-pulse 2.5s ease-in-out infinite;
}

.character-list-page .charlist-card-info {
    position: relative;
    z-index: 4;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(0deg, rgba(26, 14, 8, 0.95) 0%, rgba(42, 24, 16, 0.85) 100%);
    border-top: 1px solid var(--color-border-light);
}

.character-list-page .charlist-card-name {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.4vw, 1.05rem);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-list-page .charlist-card-title {
    font-family: var(--font-elegant);
    font-size: clamp(0.625rem, 1vw, 0.8125rem);
    color: var(--color-text-dark);
    font-style: italic;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.character-list-page .charlist-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.35rem;
}

.character-list-page .charlist-card-rarity {
    font-family: var(--font-chinese);
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    letter-spacing: 0.05em;
}

.character-list-page .charlist-card.rarity-4 .charlist-card-rarity {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

.character-list-page .charlist-card.rarity-3 .charlist-card-rarity {
    color: #d8a0e8;
    text-shadow: 0 0 8px rgba(192, 128, 224, 0.4);
}

.character-list-page .charlist-card.rarity-2 .charlist-card-rarity {
    color: #90c0e8;
    text-shadow: 0 0 8px rgba(128, 176, 224, 0.35);
}

.character-list-page .charlist-card-silhouette {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: rgba(26, 14, 8, 0.35);
    color: var(--color-gold-muted);
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.character-list-page .charlist-card.locked .charlist-card-silhouette,
.character-list-page .charlist-card-locked .charlist-card-silhouette {
    display: flex;
}

.character-list-page .charlist-card.locked .charlist-card-silhouette::after,
.character-list-page .charlist-card-locked .charlist-card-silhouette::after {
    content: '未获得';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    padding: 0.35rem 0.75rem;
    border: 2px solid rgba(212, 165, 116, 0.35);
    border-radius: 4px;
    color: rgba(212, 165, 116, 0.55);
    font-family: var(--font-chinese);
    font-size: clamp(0.875rem, 1.8vw, 1.25rem);
    letter-spacing: 0.2em;
    background: rgba(26, 14, 8, 0.6);
    backdrop-filter: blur(2px);
}

.character-list-page .charlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 12vh 1rem;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.5vw, 1.1rem);
    text-align: center;
    letter-spacing: 0.1em;
    animation: charlist-fade-in 0.6s ease;
}

.character-list-page .charlist-empty-icon {
    width: clamp(3.5rem, 8vw, 5rem);
    height: clamp(3.5rem, 8vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(61, 36, 21, 0.5);
    border: 1px solid var(--color-border);
    color: var(--color-gold-muted);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    box-shadow: var(--shadow-md);
}

/* ---------- 角色详情页 ---------- */
.character-detail-page {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    display: none;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.character-detail-page.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-detail-page .chardetail-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.character-detail-page .chardetail-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 0, 0, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
}

.character-detail-page .chardetail-content {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.character-detail-page .chardetail-info-area {
    width: 45%;
    max-width: 520px;
    background: transparent;
    padding: 1rem 2rem;
    overflow-y: auto;
    color: #f5e6d3;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vh, 1.25rem);
}

.character-detail-page .chardetail-title-block {
    margin-bottom: 1.5rem;
}

.character-detail-page .chardetail-rarity-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.character-detail-page .chardetail-rarity-text {
    font-size: clamp(0.875rem, 1.5vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.character-detail-page .chardetail-rarity-text.rarity-4,
.character-detail-page .chardetail-rarity-line .rarity-star[data-rarity="4"] {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
}

.character-detail-page .chardetail-rarity-text.rarity-3,
.character-detail-page .chardetail-rarity-line .rarity-star[data-rarity="3"] {
    color: #d8a0e8;
    text-shadow: 0 0 10px rgba(192, 128, 224, 0.4);
}

.character-detail-page .chardetail-rarity-text.rarity-2,
.character-detail-page .chardetail-rarity-line .rarity-star[data-rarity="2"] {
    color: #90c0e8;
    text-shadow: 0 0 10px rgba(128, 176, 224, 0.35);
}

.character-detail-page .chardetail-name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f5e6d3;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.25rem;
}

.character-detail-page .chardetail-title {
    font-family: var(--font-elegant);
    font-size: clamp(0.875rem, 1.5vw, 1.1rem);
    color: #d4c4b0;
    font-style: italic;
    letter-spacing: 0.08em;
}

.character-detail-page .chardetail-portrait-area {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 0;
}

.character-detail-page .chardetail-portrait {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-detail-page .chardetail-portrait img,
.character-detail-page .chardetail-portrait canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

.character-detail-page .chardetail-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    align-self: flex-start;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 1rem;
    background: rgba(61, 36, 21, 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-gold-light);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}

.character-detail-page .chardetail-back-btn:hover {
    background: rgba(61, 36, 21, 0.85);
    border-color: var(--color-gold-primary);
    color: var(--color-gold-highlight);
    box-shadow: var(--shadow-gold);
    transform: translateX(-2px);
}

.character-detail-page .chardetail-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
    background: rgba(61, 36, 21, 0.35);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.character-detail-page .chardetail-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
}

.character-detail-page .chardetail-field-bg {
    grid-column: 1 / -1;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-light);
}

.character-detail-page .chardetail-label {
    color: var(--color-text-dark);
    font-size: clamp(0.6875rem, 1vw, 0.8125rem);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.character-detail-page .chardetail-value {
    color: var(--color-text-primary);
    line-height: 1.6;
}

.character-detail-page .chardetail-field-bg .chardetail-value {
    line-height: 1.8;
    color: var(--color-text-medium);
}

.character-detail-page .chardetail-affection {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    background: rgba(61, 36, 21, 0.4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.character-detail-page .chardetail-affection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-detail-page .chardetail-affection-level {
    font-size: clamp(0.875rem, 1.4vw, 1.05rem);
    color: var(--color-gold-light);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.character-detail-page .chardetail-affection-level .affection-icon {
    margin-right: 0.25rem;
}

.character-detail-page .chardetail-affection-points {
    font-size: clamp(0.6875rem, 1vw, 0.8125rem);
    color: var(--color-text-dark);
}

.character-detail-page .chardetail-affection-bar {
    width: 100%;
    height: 5px;
    background: rgba(26, 14, 8, 0.7);
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    overflow: hidden;
}

.character-detail-page .chardetail-affection-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-dark) 0%, var(--color-gold-primary) 50%, var(--color-gold-light) 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(212, 165, 116, 0.35);
    transition: width 0.6s ease;
}

.character-detail-page .chardetail-description {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(61, 36, 21, 0.35);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.character-detail-page .chardetail-section-title {
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    color: var(--color-gold-light);
    font-weight: 600;
    letter-spacing: 0.12em;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border-light);
}

.character-detail-page .chardetail-description-text {
    max-height: 18vh;
    overflow-y: auto;
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
    color: var(--color-text-medium);
    line-height: 1.9;
    padding-right: 0.5rem;
}

.character-detail-page .chardetail-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    align-self: stretch;
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--color-gold-dark) 0%, var(--color-gold-primary) 50%, var(--color-gold-light) 100%);
    border: 1px solid rgba(212, 165, 116, 0.5);
    border-radius: var(--radius-md);
    color: var(--color-bg-dark);
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.4vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-gold);
}

.character-detail-page .chardetail-chat-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 24px rgba(212, 165, 116, 0.35);
    transform: translateY(-2px);
}

/* ---------- 动画 ---------- */
@keyframes charlist-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes charlist-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rarity-gold-pulse {
    0%, 100% { opacity: 0.7; box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.1), 0 0 14px rgba(255, 215, 0, 0.12); }
    50% { opacity: 1; box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.18), 0 0 22px rgba(255, 215, 0, 0.2); }
}

@keyframes rarity-purple-pulse {
    0%, 100% { opacity: 0.7; box-shadow: inset 0 0 20px rgba(192, 128, 224, 0.1), 0 0 14px rgba(192, 128, 224, 0.12); }
    50% { opacity: 1; box-shadow: inset 0 0 30px rgba(192, 128, 224, 0.18), 0 0 22px rgba(192, 128, 224, 0.2); }
}

@keyframes rarity-blue-pulse {
    0%, 100% { opacity: 0.7; box-shadow: inset 0 0 20px rgba(128, 176, 224, 0.1), 0 0 14px rgba(128, 176, 224, 0.12); }
    50% { opacity: 1; box-shadow: inset 0 0 30px rgba(128, 176, 224, 0.18), 0 0 22px rgba(128, 176, 224, 0.2); }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
    .character-list-page .charlist-card-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .character-list-page .charlist-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .character-list-page .charlist-card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .character-list-page .charlist-header {
        gap: 0.25rem clamp(0.5rem, 2vw, 1rem);
        padding: clamp(0.625rem, 1.5vh, 1rem) clamp(0.75rem, 3vw, 1.25rem);
    }

    .character-list-page .charlist-progress {
        min-width: 90px;
    }

    .character-list-page .charlist-filter-toggle {
        padding: 0.45rem 0.625rem;
        gap: 0.25rem;
        font-size: 0.8125rem;
    }

    .character-list-page .charlist-filter-panel {
        width: min(20rem, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
        padding: 0.625rem 0.875rem;
        max-height: calc(100vh - 7rem);
    }

    .character-detail-page .chardetail-content {
        flex-direction: row;
        padding: 1rem;
    }

    .character-detail-page .chardetail-info-area {
        width: 45%;
        height: 100%;
        padding: 1rem;
        overflow-y: auto;
    }

    .character-detail-page .chardetail-portrait-area {
        width: 55%;
        height: 100%;
        padding: 0.5rem;
    }

    .character-detail-page .chardetail-name {
        font-size: clamp(18px, 4vw, 32px);
    }

    .character-detail-page .chardetail-title {
        font-size: clamp(12px, 2.5vw, 20px);
    }

    .character-detail-page .chardetail-value {
        font-size: clamp(11px, 2vw, 18px);
    }

    .character-detail-page .chardetail-label {
        font-size: clamp(10px, 1.8vw, 15px);
    }

    .character-detail-page .chardetail-description {
        font-size: clamp(11px, 2vw, 16px);
    }

    .character-detail-page .chardetail-chat-btn {
        padding: 0.6rem 1rem;
    }

    .character-detail-page .chardetail-back-btn {
        padding: 0.5rem 0.8rem;
    }
}

@media (max-width: 480px) {

    .character-list-page .charlist-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    .character-list-page .charlist-sort-bar,
    .character-list-page .charlist-filter-bar {
        gap: 0.5rem;
    }

    .character-list-page .charlist-sort-btn,
    .character-list-page .charlist-rarity-btn,
    .character-list-page .charlist-afflatus-btn {
        min-height: 36px;
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
    }

    .character-list-page .charlist-filter-panel {
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
        max-height: calc(100vh - 6.5rem);
        padding: 0.5rem 0.75rem;
        right: 0;
    }

    .character-list-page .charlist-filter-group {
        padding: 0.5rem 0;
    }

    .character-list-page .charlist-filter-toggle {
        padding: 0.4rem 0.5rem;
    }

    .character-list-page .charlist-filter-toggle span {
        display: none;
    }

    .character-list-page .charlist-card-info {
        padding: 0.5rem 0.65rem;
    }

    .character-list-page .charlist-card-name {
        font-size: 0.8125rem;
    }

    .character-list-page .charlist-card-title {
        font-size: 0.6875rem;
    }

    .character-detail-page .chardetail-content {
        flex-direction: row;
        padding: 0.5rem;
    }

    .character-detail-page .chardetail-info-area {
        width: 45%;
        height: 100%;
        padding: 0.5rem;
        overflow-y: auto;
    }

    .character-detail-page .chardetail-portrait-area {
        width: 55%;
        height: 100%;
        padding: 0.25rem;
    }

    .character-detail-page .chardetail-fields {
        grid-template-columns: 1fr;
    }

    .character-detail-page .chardetail-name {
        font-size: clamp(16px, 4.5vw, 24px);
    }

    .character-detail-page .chardetail-title {
        font-size: clamp(11px, 2.8vw, 16px);
    }

    .character-detail-page .chardetail-value {
        font-size: clamp(10px, 2.2vw, 14px);
    }

    .character-detail-page .chardetail-label {
        font-size: clamp(9px, 2vw, 12px);
    }

    .character-detail-page .chardetail-description {
        font-size: clamp(10px, 2.2vw, 13px);
    }

    .character-detail-page .chardetail-chat-btn {
        padding: 0.5rem 0.8rem;
        min-height: 36px;
    }

    .character-detail-page .chardetail-back-btn {
        padding: 0.4rem 0.6rem;
        min-height: 36px;
    }
}

@media (max-width: 360px) {
    .character-list-page .charlist-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Mobile Reader / Book Shelf Tweaks (≤480px) ===== */
@media (max-width: 480px) {
    /* 书架 */

    /* 阅读器工具栏 */

    /* 阅读器内容 */

    /* 章节目录侧边栏 */
}

/* ===== Game page mobile keyboard handling ===== */
.game-page.keyboard-open {
    transform: translateY(calc(-1 * var(--game-kb-height, 0px)));
    transition: transform 0.2s ease-out;
}

/* ===== Game page small screen overrides ===== */
@media (max-width: 480px) {
    .game-header {
        gap: 3px;
        padding: 0px 6px;
        flex-wrap: nowrap;
        min-height: 24px;
        max-height: 28px;
        background: rgba(0, 0, 0, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .game-header-status {
        display: none;
    }

    .game-chapter-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .game-chapter-number {
        font-size: clamp(0.625rem, 2.2vw, 0.75rem);
    }

    .game-chapter-title {
        font-size: clamp(0.75rem, 3.2vw, 0.875rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 34vw;
    }

    .game-back-btn span {
        display: none;
    }

    .game-header-btn-label {
        display: none;
    }

    .game-back-btn {
        min-width: 22px;
        min-height: 22px;
        padding: 2px 3px;
    }

    .game-settings-btn,
    .game-tts-btn,
    .game-header-btn {
        width: clamp(22px, 8vw, 1.875rem);
        height: clamp(22px, 8vw, 1.875rem);
        padding: 2px;
        flex-shrink: 0;
    }

    .voice-btn,
    .game-send-btn {
        width: clamp(24px, 8.5vw, 2rem);
        height: clamp(24px, 8.5vw, 2rem);
        flex-shrink: 0;
    }

    .settings-close-btn,
    .npc-panel-close-btn {
        width: 44px;
        height: 44px;
    }
}

/* ===== Modal / panel mobile adaptations (<=480px) ===== */
@media (max-width: 480px) {
    .model-config-panel .model-config-content,
    .model-type-selector .model-type-selector-content {
        width: 96vw;
        max-height: 92vh;
        overflow-y: auto;
        padding: 1rem;
        border-radius: var(--glass-radius);
    }

    .model-config-panel .config-close-btn {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .model-config-panel .model-config-title,
    .model-type-selector .model-type-selector-title {
        font-size: 1.125rem;
    }

    .model-config-panel .model-config-subtitle,
    .model-type-selector .model-type-selector-subtitle {
        font-size: 0.75rem;
    }

    .model-config-panel .settings-label {
        font-size: 0.8125rem;
    }

    .model-config-panel .settings-input,
    .model-config-panel .settings-test-btn,
    .model-config-panel .settings-save-btn,
    .model-config-panel .model-provider-select,
    .model-config-panel .model-name-select,
    .model-config-panel .model-name-input {
        font-size: 0.9375rem;
        min-height: 44px;
    }

    .model-config-panel .settings-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .model-config-panel .settings-actions button {
        width: 100%;
        min-height: 44px;
    }

    .model-config-panel .model-select-wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }

    .model-config-panel .model-refresh-btn {
        width: 100%;
        min-height: 44px;
    }

    .model-config-panel .tts-section {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .model-config-panel .tts-section-title {
        font-size: 0.9375rem;
    }

    .model-config-panel .tts-voice-label {
        font-size: 0.8125rem;
    }

    .model-config-panel .tts-voice-category {
        padding: 8px;
    }

    .model-config-panel .tts-toggle-switch,
    .model-config-panel .tts-toggle-switch.active::after {
        transform: none;
    }

    .model-config-panel .tts-toggle-switch.active::after {
        left: 20px;
    }

    .tts-panel {
        width: 96vw;
        max-height: 92vh;
        padding: 1rem;
        border-radius: var(--glass-radius);
    }

    .tts-panel-title {
        font-size: 1.125rem;
    }

    .tts-panel-close {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .tts-control-label,
    .tts-toggle-label,
    .tts-voice-select,
    .tts-slider-row {
        font-size: 0.9375rem;
    }

    .tts-toggle-switch {
        width: 44px;
        height: 24px;
    }

    .tts-toggle-switch.active .tts-toggle-slider {
        transform: translateX(20px);
    }

    .exit-confirm-modal .exit-confirm-content {
        width: 92vw;
        max-width: 22rem;
        padding: 1.25rem 1rem;
    }

    .exit-confirm-modal .exit-confirm-title {
        font-size: 1.25rem;
    }

    .exit-confirm-modal .exit-confirm-text {
        font-size: 0.875rem;
    }

    .exit-confirm-modal .exit-confirm-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .exit-confirm-modal .exit-confirm-btn,
    .exit-confirm-modal .exit-book-btn,
    .exit-confirm-modal .exit-normal-btn,
    .exit-confirm-modal .exit-cancel-btn {
        width: 100%;
        min-height: 44px;
        font-size: 0.9375rem;
    }
}

/* ===== Custom Script: Text Mode Layout ===== */

#gamePage.game-mode-text {
    /* keep the page as a flex column, rely on header/content/input */
}

/* Hide visual-only layers in text mode */
#gamePage.game-mode-text .galgame-bg-layer,
#gamePage.game-mode-text .galgame-char-layer,
#gamePage.game-mode-text .galgame-dialogue-bar {
    display: none !important;
}

/* Make the content area a vertical flex column */
#gamePage.game-mode-text #gameContentArea {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Reveal the originally hidden wrapper that holds #dialogueMessages */
#gamePage.game-mode-text #gameContentArea > div:first-child {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#gamePage.game-mode-text .game-dialogue-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Hide the inner dialogue background layer so only text shows */
#gamePage.game-mode-text .dialogue-bg-layer {
    display: none !important;
}

/* Scrollable message log occupying the remaining space above input */
#gamePage.game-mode-text #dialogueMessages,
#gamePage.game-mode-text .dialogue-messages {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

/* Message bubble tweaks for narrow portrait screens */
#gamePage.game-mode-text .msg {
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    align-items: flex-start;
}

#gamePage.game-mode-text .msg-npc,
#gamePage.game-mode-text .msg-user {
    max-width: 92%;
}

#gamePage.game-mode-text .msg-narration,
#gamePage.game-mode-text .msg-system {
    max-width: 96%;
}

#gamePage.game-mode-text .msg-body {
    font-size: 1rem;
    line-height: 1.55;
}

#gamePage.game-mode-text .msg-content {
    max-width: 100%;
    padding: 0.625rem 0.875rem;
}

#gamePage.game-mode-text .msg-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

#gamePage.game-mode-text .msg-sender {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neon-sky);
}

/* Quick replies: wrap and remain easy to tap */
#gamePage.game-mode-text .quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

#gamePage.game-mode-text .quick-reply-btn {
    min-height: 36px;
    padding: 0.375rem 0.875rem !important;
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: left;
}

/* Compact header for portrait screens */
#gamePage.game-mode-text .game-header {
    min-height: 22px;
    max-height: none;
    padding: 0.25rem 0.5rem;
    gap: 0.25rem;
}

#gamePage.game-mode-text .game-back-btn,
#gamePage.game-mode-text .game-settings-btn,
#gamePage.game-mode-text .game-tts-btn,
#gamePage.game-mode-text .game-header-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 2px;
}

#gamePage.game-mode-text .game-back-btn span,
#gamePage.game-mode-text .game-header-btn-label {
    display: none;
}

#gamePage.game-mode-text .game-header-status {
    font-size: 9px;
    gap: 0.25rem;
    margin: 0 0.25rem;
}

#gamePage.game-mode-text .game-chapter-number {
    font-size: 0.625rem;
}

#gamePage.game-mode-text .game-chapter-title {
    font-size: 0.75rem;
}

/* Slightly tighter input area */
#gamePage.game-mode-text .game-input-area {
    min-height: 26px;
    padding: 0.25rem 0.5rem;
}

/* Portrait-specific extra tightening */
@media (orientation: portrait) {
    #gamePage.game-mode-text .msg-body {
        font-size: 1.0625rem;
        line-height: 1.6;
    }

    #gamePage.game-mode-text .game-header {
        padding-top: max(0.25rem, env(safe-area-inset-top));
    }

    #gamePage.game-mode-text .game-input-area {
        padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
    }
}

/* ===== Custom Script: Visual Mode Guard ===== */

#gamePage.game-mode-visual #gameContentArea {
    display: flex;
    flex-direction: row;
}

#gamePage.game-mode-visual #gameContentArea > div:first-child,
#gamePage.game-mode-visual .game-dialogue-area,
#gamePage.game-mode-visual #dialogueMessages,
#gamePage.game-mode-visual .dialogue-messages {
    display: none !important;
}


/* ============================================================
   ===== Book Shelf Page Layout (书架页内部布局) =====
   补全书架页缺失的布局样式，深色金调 + 毛玻璃，与项目其他
   子页面（reader / game / gacha）风格一致。
   ============================================================ */

/* 页面容器：覆盖为 flex 列布局，使 header 固定、body 可滚动 */
.book-shelf-page {
    z-index: 100;
    display: none;
    flex-direction: column;
}
.book-shelf-page.active {
    display: flex;
}

/* 背景层：深色金调渐变 */
.shelf-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.03), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.5), transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.shelf-page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4a574' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

/* 顶部栏：毛玻璃 + 左右对齐 */
.shelf-header {
    position: relative;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.shelf-back-btn,
.shelf-announce-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    color: var(--glass-text);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.shelf-back-btn svg,
.shelf-announce-btn svg {
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
}
.shelf-back-btn:hover,
.shelf-announce-btn:hover {
    background: rgba(212, 165, 116, 0.18);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}
.shelf-back-btn:active,
.shelf-announce-btn:active {
    transform: scale(0.96);
}

.shelf-header-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 2px;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 主体：居中限宽 + 滚动 */
.shelf-body {
    position: relative;
    z-index: var(--z-content);
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 书籍网格 */
.shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* 空状态 */
.shelf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-text-medium);
}
.shelf-empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 1rem;
    opacity: 0.65;
}
.shelf-empty-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.shelf-empty-text {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 1px;
}
.shelf-empty-hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-medium);
}

/* 书籍卡片 */
.shelf-book-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--glass-shadow), var(--glass-shadow-inset);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.shelf-book-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-primary);
    box-shadow: var(--shadow-gold), var(--glass-shadow-inset);
}
.shelf-book-card:active {
    transform: translateY(-2px);
}

/* 删除按钮：默认隐藏，hover 或 show-delete 时显示 */
.shelf-book-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    background: rgba(196, 74, 58, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.shelf-book-card:hover .shelf-book-delete,
.shelf-book-card.show-delete .shelf-book-delete {
    opacity: 1;
    transform: scale(1);
}
.shelf-book-delete:hover {
    background: var(--color-accent-red);
}

/* 封面区：3:4 渐变 + 居中首字 */
.shelf-book-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, var(--color-bg-warm) 0%, var(--color-bg-medium) 60%, var(--color-bg-dark) 100%);
    border-bottom: 1px solid var(--color-border-light);
    overflow: hidden;
}
.shelf-book-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(212, 165, 116, 0.20), transparent 60%);
    pointer-events: none;
}
.shelf-book-cover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-gold-dark), var(--color-gold-primary), var(--color-gold-dark));
    opacity: 0.7;
}
.shelf-book-cover-icon {
    position: relative;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--theme-primary);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 2px;
}

/* 卡片信息 */
.shelf-book-info {
    padding: 0.75rem 0.9rem 1rem;
}
.shelf-book-name {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shelf-book-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-medium);
    letter-spacing: 0.3px;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
    .shelf-header {
        padding: 0.75rem 1rem;
    }
    .shelf-back-btn span,
    .shelf-announce-btn span {
        display: none; /* 仅显示图标，节省空间 */
    }
    .shelf-back-btn,
    .shelf-announce-btn {
        padding: 0.5rem;
    }
    .shelf-body {
        padding: 1.25rem 1rem;
    }
    .shelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
    .shelf-book-cover-icon {
        font-size: 2.25rem;
    }
    .shelf-book-info {
        padding: 0.6rem 0.7rem 0.8rem;
    }
    .shelf-book-name {
        font-size: 0.95rem;
    }
    .shelf-empty {
        padding: 3rem 1rem;
    }
    .shelf-empty-icon {
        width: 96px;
        height: 96px;
    }
}

@media (max-width: 480px) {
    .shelf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .shelf-body {
        padding: 1rem 0.75rem;
    }
}

/* ===== Mobile Touch Action (Spec subtask 9) ===== */
#galgamePortraitCanvas,
#chardetailLive2dCanvas,
#charchatLive2dCanvas {
    touch-action: none;
}

.reader-body {
    touch-action: pan-y;
}

.dy-video-view {
    touch-action: pan-y;
}

/* ============================================================ */
/* ===== Book Reader Styles (appended) ========================= */
/* 对标起点读书/微信读书/多看阅读，覆盖阅读器完整 UI           */
/* ============================================================ */

/* ===== Reader Theme Variables (default = parchment) ===== */
.book-reader-page {
    --reader-bg: #F5E6D3;
    --reader-text: #3D2415;
    --reader-text-secondary: #8a7560;
    --reader-accent: #8B6914;
    --reader-accent-soft: rgba(139, 105, 20, 0.15);
    --reader-border: rgba(61, 36, 21, 0.12);
    --reader-border-light: rgba(61, 36, 21, 0.06);
    --reader-card-bg: rgba(255, 255, 255, 0.5);
    --reader-hover: rgba(61, 36, 21, 0.06);
    --reader-glass-bg: rgba(245, 230, 211, 0.85);
    --reader-track: rgba(61, 36, 21, 0.15);
}

/* ===== Four Themes ===== */
.book-reader-page.theme-parchment {
    --reader-bg: #F5E6D3;
    --reader-text: #3D2415;
    --reader-text-secondary: #8a7560;
    --reader-accent: #8B6914;
    --reader-accent-soft: rgba(139, 105, 20, 0.15);
    --reader-border: rgba(61, 36, 21, 0.12);
    --reader-border-light: rgba(61, 36, 21, 0.06);
    --reader-card-bg: rgba(255, 255, 255, 0.5);
    --reader-hover: rgba(61, 36, 21, 0.06);
    --reader-glass-bg: rgba(245, 230, 211, 0.85);
    --reader-track: rgba(61, 36, 21, 0.15);
}
.book-reader-page.theme-day {
    --reader-bg: #FFFFFF;
    --reader-text: #333333;
    --reader-text-secondary: #888;
    --reader-accent: #1a73e8;
    --reader-accent-soft: rgba(26, 115, 232, 0.12);
    --reader-border: rgba(0, 0, 0, 0.1);
    --reader-border-light: rgba(0, 0, 0, 0.05);
    --reader-card-bg: #f5f5f5;
    --reader-hover: rgba(0, 0, 0, 0.04);
    --reader-glass-bg: rgba(255, 255, 255, 0.85);
    --reader-track: rgba(0, 0, 0, 0.12);
}
.book-reader-page.theme-eye {
    --reader-bg: #C7EDCC;
    --reader-text: #2D5F2D;
    --reader-text-secondary: #5a8a5a;
    --reader-accent: #3a7d3a;
    --reader-accent-soft: rgba(58, 125, 58, 0.15);
    --reader-border: rgba(45, 95, 45, 0.12);
    --reader-border-light: rgba(45, 95, 45, 0.06);
    --reader-card-bg: rgba(255, 255, 255, 0.4);
    --reader-hover: rgba(45, 95, 45, 0.06);
    --reader-glass-bg: rgba(199, 237, 204, 0.85);
    --reader-track: rgba(45, 95, 45, 0.15);
}
.book-reader-page.theme-night {
    --reader-bg: #1A1A1A;
    --reader-text: #B0B0B0;
    --reader-text-secondary: #777;
    --reader-accent: #5a9fd4;
    --reader-accent-soft: rgba(90, 159, 212, 0.15);
    --reader-border: rgba(255, 255, 255, 0.1);
    --reader-border-light: rgba(255, 255, 255, 0.05);
    --reader-card-bg: #2a2a2a;
    --reader-hover: rgba(255, 255, 255, 0.06);
    --reader-glass-bg: rgba(26, 26, 26, 0.85);
    --reader-track: rgba(255, 255, 255, 0.12);
}

/* ===== Page background layer ===== */
.book-reader-page .reader-page-bg {
    position: absolute;
    inset: 0;
    background: var(--reader-bg);
    z-index: 0;
    pointer-events: none;
    transition: background 0.3s;
}
.book-reader-page > *:not(.reader-page-bg) {
    position: relative;
    z-index: 1;
}

/* ===== Reader Body (scroll area) ===== */
.book-reader-page .reader-body {
    flex: 1;
    overflow-y: auto;
    touch-action: pan-y;
    background: var(--reader-bg);
    transition: background 0.3s;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== Reader Content (typography container) ===== */
.book-reader-page .reader-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
    transition: max-width 0.3s, padding 0.3s;
}

/* ===== Book Title ===== */
.book-reader-page .reader-book-title {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin: 0 0 0.5em;
    color: var(--reader-text);
    letter-spacing: 1px;
}

/* ===== Chapter ===== */
.book-reader-page .reader-chapter {
    margin-bottom: 3em;
    padding-top: 1em;
}
.book-reader-page .reader-chapter-title {
    text-align: center;
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    font-weight: 600;
    margin: 0 0 1.5em;
    color: var(--reader-text);
    letter-spacing: 1px;
}

/* ===== Paragraph & Dialogue ===== */
.book-reader-page .reader-paragraph {
    line-height: 2;
    margin: 0 0 1em;
    color: var(--reader-text);
    text-align: justify;
    transition: color 0.3s;
}
.book-reader-page .reader-dialogue-line {
    padding-left: 1em;
    border-left: 2px solid var(--reader-accent);
    margin: 0 0 1em;
    color: var(--reader-text);
    line-height: 2;
}

/* ===== Epilogue & The End ===== */
.book-reader-page .reader-epilogue {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--reader-border);
    text-align: center;
}
.book-reader-page .reader-epilogue-text {
    font-style: italic;
    opacity: 0.7;
    color: var(--reader-text);
}
.book-reader-page .reader-the-end {
    margin-top: 2em;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--reader-accent);
}

/* ===== Header Toolbar ===== */
.book-reader-page .reader-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--reader-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
    border-bottom: 1px solid var(--reader-border-light);
    transition: transform 0.3s, opacity 0.3s;
}
.book-reader-page .reader-header.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
.book-reader-page .reader-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--reader-text);
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.book-reader-page .reader-back-btn:hover {
    background: var(--reader-hover);
}
.book-reader-page .reader-back-btn:active {
    background: var(--reader-accent-soft);
}
.book-reader-page .reader-title {
    flex: 1;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    color: var(--reader-text);
}
.book-reader-page .reader-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.book-reader-page .reader-header-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--reader-text);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}
.book-reader-page .reader-header-btn:hover {
    background: var(--reader-hover);
}
.book-reader-page .reader-header-btn:active {
    background: var(--reader-accent-soft);
}

/* ===== Footer Toolbar ===== */
.book-reader-page .reader-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    background: var(--reader-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--reader-border-light);
    transition: transform 0.3s, opacity 0.3s;
}
.book-reader-page .reader-footer.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.book-reader-page .reader-footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 8px;
}
.book-reader-page .reader-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--reader-text);
    cursor: pointer;
    font-size: 0.75rem;
    border-radius: 8px;
    transition: background 0.2s;
}
.book-reader-page .reader-nav-btn:hover {
    background: var(--reader-hover);
}
.book-reader-page .reader-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Progress Bar ===== */
.book-reader-page .reader-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.book-reader-page .reader-progress-bar {
    flex: 1;
    height: 3px;
    background: var(--reader-track);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}
.book-reader-page .reader-progress-fill {
    height: 100%;
    background: var(--reader-accent);
    border-radius: 2px;
    transition: width 0.2s;
}
.book-reader-page .reader-progress-text {
    font-size: 0.75rem;
    color: var(--reader-text-secondary);
    min-width: 48px;
    text-align: right;
}

/* ===== Reader Orientation (horizontal = dual column) ===== */
.book-reader-page.reader-orientation-horizontal .reader-content {
    max-width: 1100px;
    column-count: 2;
    column-gap: 48px;
    column-rule: 1px solid var(--reader-border-light);
}
.book-reader-page.reader-orientation-horizontal .reader-chapter {
    break-inside: avoid-column;
}

/* ===== Chapter Title Float ===== */
.book-reader-page .reader-chapter-title-float {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    background: var(--reader-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--reader-border-light);
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--reader-text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 20;
    white-space: nowrap;
}
.book-reader-page .reader-chapter-title-float.show {
    opacity: 1;
}

/* ===== TOC Sidebar ===== */
.book-reader-page .reader-toc-sidebar {
    position: fixed;
    inset: 0;
    z-index: 30;
    visibility: hidden;
}
.book-reader-page .reader-toc-sidebar.active {
    visibility: visible;
}
.book-reader-page .reader-toc-sidebar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
.book-reader-page .reader-toc-sidebar.active .reader-toc-sidebar-overlay {
    opacity: 1;
}
.book-reader-page .reader-toc-sidebar-drawer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: clamp(280px, 80vw, 360px);
    background: var(--reader-bg);
    transform: translateX(100%);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
}
.book-reader-page .reader-toc-sidebar.active .reader-toc-sidebar-drawer {
    transform: translateX(0);
}
.book-reader-page .reader-toc-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--reader-border-light);
}
.book-reader-page .reader-toc-sidebar-book-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--reader-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.book-reader-page .reader-toc-sidebar-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--reader-text);
    cursor: pointer;
    border-radius: 8px;
}
.book-reader-page .reader-toc-sidebar-label {
    padding: 12px 16px 8px;
    font-size: 0.75rem;
    color: var(--reader-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.book-reader-page .reader-toc-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 16px;
    -webkit-overflow-scrolling: touch;
}
.book-reader-page .reader-toc-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--reader-text);
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    border-radius: 0 8px 8px 0;
    transition: background 0.2s, border-color 0.2s;
    gap: 8px;
}
.book-reader-page .reader-toc-item:hover {
    background: var(--reader-hover);
}
.book-reader-page .reader-toc-item.active {
    background: var(--reader-accent-soft);
    border-left-color: var(--reader-accent);
    font-weight: 500;
}
.book-reader-page .reader-toc-item-num {
    font-size: 0.8rem;
    color: var(--reader-text-secondary);
    min-width: 24px;
}

/* ===== Bookmark Panel ===== */
.book-reader-page .reader-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.book-reader-page .reader-panel.active {
    opacity: 1;
    visibility: visible;
}
.book-reader-page .reader-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.book-reader-page .reader-panel-content {
    position: absolute;
    background: var(--reader-bg);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.book-reader-page .reader-bookmark-content {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    padding: 16px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}
.book-reader-page .reader-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--reader-border-light);
}
.book-reader-page .reader-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--reader-text);
}
.book-reader-page .reader-panel-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--reader-text);
    cursor: pointer;
    border-radius: 8px;
}
.book-reader-page .reader-bookmark-actions {
    padding: 12px 0;
}
.book-reader-page .reader-add-bookmark-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px;
    background: var(--reader-accent-soft);
    border: 1px dashed var(--reader-accent);
    border-radius: 8px;
    color: var(--reader-accent);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, opacity 0.2s;
}
.book-reader-page .reader-add-bookmark-btn:hover {
    opacity: 0.8;
}
.book-reader-page .reader-bookmark-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.book-reader-page .reader-bookmark-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--reader-card-bg);
    border-radius: 8px;
    margin-bottom: 8px;
}
.book-reader-page .reader-bookmark-info {
    flex: 1;
    overflow: hidden;
}
.book-reader-page .reader-bookmark-chapter {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--reader-text);
    margin-bottom: 4px;
}
.book-reader-page .reader-bookmark-context {
    font-size: 0.8rem;
    color: var(--reader-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.book-reader-page .reader-bookmark-delete {
    min-width: 36px;
    min-height: 36px;
    background: transparent;
    border: none;
    color: var(--reader-text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-reader-page .reader-bookmark-delete:hover {
    background: var(--reader-hover);
    color: #e74c3c;
}

/* ===== Settings Panel ===== */
.book-reader-page .reader-settings-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.book-reader-page .reader-settings-panel.active {
    opacity: 1;
    visibility: visible;
}
.book-reader-page .reader-settings-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.book-reader-page .reader-settings-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--reader-bg);
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}
.book-reader-page .reader-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--reader-border-light);
}
.book-reader-page .reader-settings-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--reader-text);
}
.book-reader-page .reader-settings-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--reader-text);
    cursor: pointer;
    border-radius: 8px;
}
.book-reader-page .reader-settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--reader-border-light);
    padding: 0 16px;
}
.book-reader-page .reader-settings-tab {
    flex: 1;
    min-height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--reader-text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.2s, border-color 0.2s;
}
.book-reader-page .reader-settings-tab.active {
    color: var(--reader-accent);
    border-bottom-color: var(--reader-accent);
    font-weight: 600;
}
.book-reader-page .reader-settings-body {
    display: none;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.book-reader-page .reader-settings-body.active {
    display: block;
}
.book-reader-page .reader-settings-section {
    margin-bottom: 20px;
}
.book-reader-page .reader-settings-label {
    display: block;
    font-size: 0.85rem;
    color: var(--reader-text-secondary);
    margin-bottom: 10px;
}
.book-reader-page .reader-toggle-label {
    font-size: 0.9rem;
    color: var(--reader-text);
}

/* ===== Font / Line-height / Page-mode Selectors ===== */
.book-reader-page .reader-font-size-selector,
.book-reader-page .reader-font-family-selector,
.book-reader-page .reader-line-height-selector,
.book-reader-page .reader-page-mode-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.book-reader-page .reader-font-size-btn,
.book-reader-page .reader-font-family-btn,
.book-reader-page .reader-line-height-btn,
.book-reader-page .reader-page-mode-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--reader-card-bg);
    border: 1px solid var(--reader-border);
    border-radius: 8px;
    color: var(--reader-text);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.book-reader-page .reader-font-size-btn:hover,
.book-reader-page .reader-font-family-btn:hover,
.book-reader-page .reader-line-height-btn:hover,
.book-reader-page .reader-page-mode-btn:hover {
    background: var(--reader-hover);
}
.book-reader-page .reader-font-size-btn.active,
.book-reader-page .reader-font-family-btn.active,
.book-reader-page .reader-line-height-btn.active,
.book-reader-page .reader-page-mode-btn.active {
    background: var(--reader-accent);
    color: #fff;
    border-color: var(--reader-accent);
}

/* ===== Theme Selector ===== */
.book-reader-page .reader-theme-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.book-reader-page .reader-theme-btn {
    min-height: 56px;
    padding: 12px;
    border: 2px solid var(--reader-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--reader-text);
}
.book-reader-page .reader-theme-btn.active {
    border-color: var(--reader-accent);
    box-shadow: 0 0 0 2px var(--reader-accent-soft);
}

/* ===== Brightness / Auto-speed Sliders ===== */
.book-reader-page .reader-brightness-slider,
.book-reader-page .reader-auto-speed-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}
.book-reader-page .reader-brightness-slider input[type="range"],
.book-reader-page .reader-auto-speed-slider input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: var(--reader-accent);
}
.book-reader-page .reader-brightness-value,
.book-reader-page .reader-auto-speed-value {
    font-size: 0.85rem;
    color: var(--reader-text-secondary);
    min-width: 40px;
    text-align: right;
}

/* ===== Toggle Switch ===== */
.book-reader-page .reader-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.book-reader-page .reader-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.book-reader-page .reader-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.book-reader-page .reader-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--reader-track);
    border-radius: 12px;
    transition: 0.3s;
}
.book-reader-page .reader-toggle-switch input:checked + .reader-toggle-slider {
    background: var(--reader-accent);
}
.book-reader-page .reader-toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.book-reader-page .reader-toggle-switch input:checked + .reader-toggle-slider:before {
    transform: translateX(20px);
}

/* ===== Mobile Responsive (Reader) ===== */
@media (max-width: 600px) {
    .book-reader-page .reader-content {
        padding: 24px 16px;
    }
    .book-reader-page .reader-title {
        font-size: 0.85rem;
    }
    .book-reader-page .reader-header {
        padding: 6px 12px;
    }
    .book-reader-page .reader-footer {
        padding: 6px 12px;
    }
    .book-reader-page .reader-nav-btn {
        padding: 6px 12px;
        font-size: 0.7rem;
    }
    .book-reader-page .reader-header-btn {
        min-width: 40px;
        min-height: 40px;
    }
    .book-reader-page.reader-orientation-horizontal .reader-content {
        column-count: 1;
        max-width: 100%;
    }
}

/* ===== End of Book Reader Styles ===== */

/* ============================================================
   ===== Gacha Page Visual Refinement (Task 4) ===============
   统一书信/火漆主题抽卡界面，仅作用于 .gacha-* 元素
   ============================================================ */

/* ---------- 页面整体 ---------- */
.gacha-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0a0a0a;
    font-family: var(--font-display);
    color: #fff;
    display: none;
    z-index: 50;
}

.gacha-page.active {
    display: flex;
    flex-direction: column;
}

/* ---------- 背景 ---------- */
.gacha-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.gacha-bg-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%),
        #0a0a0a;
}

.gacha-bg-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}

.gacha-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.55;
}

/* ---------- 头部 ---------- */
.gacha-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: clamp(0.75rem, 2vh, 1.25rem) clamp(1rem, 3vw, 2rem);
    padding-top: max(clamp(0.75rem, 2vh, 1.25rem), env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(26, 14, 8, 0.85) 0%, rgba(26, 14, 8, 0.4) 60%, transparent 100%);
    pointer-events: none;
}

.gacha-header > * {
    pointer-events: auto;
}

.gacha-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}

.gacha-back-btn svg {
    width: 1.1em;
    height: 1.1em;
}

.gacha-back-btn span {
    color: #fff;
}

.gacha-back-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    transform: translateX(-2px);
}

.gacha-title-group {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

.gacha-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.85rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(212, 165, 116, 0.25);
}

.gacha-subtitle {
    font-family: var(--font-elegant);
    font-size: clamp(0.65rem, 1.4vw, 0.85rem);
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    margin-top: 0.15rem;
}

.gacha-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.gacha-letters,
.gacha-fragments {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem 0.35rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

.gacha-letters::after,
.gacha-fragments::after {
    content: "";
    position: absolute;
    left: -0.25rem;
    bottom: -0.25rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--color-gold-light), var(--color-gold-dark));
    box-shadow: 0 0 6px rgba(212, 165, 116, 0.5);
    opacity: 0.85;
}

.gacha-fragments::after {
    background: radial-gradient(circle at 30% 30%, var(--color-gold-bright), var(--color-accent-yellow));
}

.gacha-letters svg,
.gacha-fragments svg {
    width: 1.1em;
    height: 1.1em;
    color: #fff;
}

.gacha-letters span,
.gacha-fragments span {
    color: #fff;
    min-width: 1.5em;
    text-align: right;
}

.gacha-letters-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.25rem;
    border: 1px solid var(--color-gold-primary);
    border-radius: 50%;
    background: rgba(212, 165, 116, 0.12);
    color: var(--color-gold-light);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gacha-letters-add-btn:hover {
    transform: scale(1.15);
    background: rgba(212, 165, 116, 0.25);
    box-shadow: 0 0 10px rgba(212, 165, 116, 0.35);
}

.gacha-header-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.gacha-header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

.gacha-header-icon-btn svg {
    width: 1.25em;
    height: 1.25em;
}

/* ---------- 中部装饰 ---------- */
.gacha-main {
    position: relative;
    z-index: var(--z-content);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.gacha-main .gacha-pity-bar {
    margin-top: auto;
}

.gacha-deco-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    text-align: center;
}

.gacha-deco-text {
    margin: 0;
    font-family: var(--font-chinese), var(--font-elegant), serif;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 16px rgba(212, 165, 116, 0.2);
}

/* ---------- 保底进度条 ---------- */
.gacha-pity-bar {
    width: 90%;
    max-width: 360px;
    height: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    position: relative;
    margin: 0 auto;
}

.gacha-pity-bar-fill {
    height: 8px;
    background: linear-gradient(90deg, #007aff, #5ac8fa);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.gacha-pity-bar-label {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

/* ---------- 底部按钮 ---------- */
.gacha-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-content);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 4vw, 2.5rem);
    padding-bottom: max(clamp(1rem, 3vh, 2rem), env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(26, 14, 8, 0.92) 0%, rgba(26, 14, 8, 0.5) 60%, transparent 100%);
    pointer-events: none;
}

.gacha-footer > * {
    pointer-events: auto;
}

.gacha-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 6.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--color-gold-primary);
    border-radius: var(--radius-lg);
    background: rgba(42, 24, 16, 0.78);
    color: var(--color-gold-light);
    font-family: var(--font-body);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(212, 165, 116, 0.12);
    backdrop-filter: blur(6px);
}

.gacha-btn-label {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
}

.gacha-btn-cost {
    position: relative;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
}

.gacha-btn-single,
.gacha-btn-ten {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    min-width: 140px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.gacha-btn-single:hover,
.gacha-btn-ten:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.03);
}

.gacha-btn-single:active,
.gacha-btn-ten:active {
    transform: scale(0.98);
}

.gacha-btn-single {
    background: rgba(0, 122, 255, 0.25);
    border-color: rgba(0, 122, 255, 0.5);
}

.gacha-btn-single:hover {
    background: rgba(0, 122, 255, 0.35);
}

.gacha-btn.disabled,
.gacha-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.35);
}

/* ---------- 动画与结果遮罩 ---------- */
.gacha-pull-video-wrap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #000;
}

.gacha-pull-video-wrap.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gacha-fade-in 0.3s ease;
}

.gacha-pull-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gacha-envelope-result,
.gacha-ten-summary-overlay,
.gacha-source-overlay,
.gacha-shop-overlay,
.gacha-envelope-anim-overlay {
    display: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .gacha-title-group {
        max-width: 42vw;
    }

    .gacha-title {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }

    .gacha-subtitle {
        display: none;
    }

    .gacha-header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.4rem;
    }

    .gacha-header-icon-btn {
        width: 32px;
        height: 32px;
    }

    .gacha-footer {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    .gacha-btn-single,
    .gacha-btn-ten {
        min-width: 110px;
        padding: 0.8rem 1.4rem;
    }

    .gacha-btn-label {
        font-size: 0.9rem;
    }

    .gacha-btn-cost {
        font-size: 0.65rem;
    }

    .gacha-resume-card {
        width: min(96vw, 900px);
        max-height: 92vh;
    }

    .gacha-resume-body {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
        max-height: calc(92vh - 150px);
    }

    .gacha-resume-portrait-wrap {
        min-height: 160px;
        padding: 0.5rem;
    }

    .gacha-resume-portrait img,
    .gacha-resume-portrait canvas {
        max-height: 180px;
    }

    .gacha-resume-rarity,
    .gacha-resume-afflatus {
        font-size: 1.5rem;
        padding: 0.35rem 0.75rem;
    }

    .gacha-resume-name {
        font-size: 2rem;
    }

    .gacha-resume-title {
        font-size: 1.5rem;
    }

    .gacha-resume-basic {
        font-size: 1.5rem;
    }

    .gacha-resume-section-title {
        font-size: 1.5rem;
    }

    .gacha-resume-section-text {
        font-size: 1.5rem;
        line-height: 1.6;
    }

    .gacha-resume-duplicate-stamp {
        top: 0.75rem;
        right: 1rem;
        font-size: 1.5rem;
        padding: 0.45rem 0.8rem;
    }

    .gacha-resume-counter {
        font-size: 1.25rem;
    }

    .gacha-resume-confirm-btn {
        padding: 1.2rem 2.5rem;
        font-size: 1.5rem;
        min-height: 44px;
    }

    .gacha-ten-summary-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 1rem;
    }

    .gacha-ten-summary-title {
        font-size: 1.6rem;
    }

    .gacha-ten-summary-name {
        font-size: 1.5rem;
    }

    .gacha-ten-summary-rarity {
        font-size: 1.25rem;
    }

    .gacha-ten-summary-duplicate {
        font-size: 1.25rem;
        padding: 0.15rem 0.4rem;
    }

    .gacha-ten-summary-confirm {
        padding: 1.2rem 2.5rem;
        font-size: 1.5rem;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .gacha-header {
        padding: 0.6rem 0.75rem;
    }

    .gacha-back-btn span {
        display: none;
    }

    .gacha-back-btn {
        padding: 0.4rem;
    }

    .gacha-title {
        font-size: 1.1rem;
        letter-spacing: 0.08em;
    }

    .gacha-header-right {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem;
        max-width: 50vw;
    }

    .gacha-letters,
    .gacha-fragments {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .gacha-letters-add-btn {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.85rem;
    }

    .gacha-header-icon-btn {
        width: 30px;
        height: 30px;
    }

    .gacha-deco-text {
        font-size: 1rem;
    }

    .gacha-footer {
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .gacha-btn-single,
    .gacha-btn-ten {
        min-width: 110px;
        padding: 0.75rem 1rem;
    }

    .gacha-btn-label {
        font-size: 0.85rem;
    }

    .gacha-btn-cost {
        font-size: 0.6rem;
    }

    .gacha-resume-card {
        width: 100%;
        max-height: 94vh;
    }

    .gacha-resume-paper {
        border-radius: 0.375rem;
    }

    .gacha-resume-header {
        padding: 1rem 1rem 0.5rem;
        gap: 0.5rem;
    }

    .gacha-resume-rarity,
    .gacha-resume-afflatus {
        font-size: 1.5rem;
        padding: 0.35rem 0.75rem;
    }

    .gacha-resume-body {
        padding: 0.75rem;
        gap: 0.75rem;
        max-height: calc(94vh - 140px);
    }

    .gacha-resume-portrait-wrap {
        min-height: 120px;
    }

    .gacha-resume-portrait img,
    .gacha-resume-portrait canvas {
        max-height: 140px;
    }

    .gacha-resume-name {
        font-size: 2rem;
    }

    .gacha-resume-title {
        font-size: 1.5rem;
    }

    .gacha-resume-basic {
        font-size: 1.5rem;
    }

    .gacha-resume-section-title {
        font-size: 1.5rem;
    }

    .gacha-resume-section-text {
        font-size: 1.5rem;
        line-height: 1.55;
    }

    .gacha-resume-first-message {
        padding: 0.45rem 0.6rem;
    }

    .gacha-resume-duplicate-stamp {
        top: 0.5rem;
        right: 0.75rem;
        font-size: 1.5rem;
        padding: 0.35rem 0.65rem;
        transform: rotate(10deg);
    }

    .gacha-resume-counter {
        bottom: 0.75rem;
        left: 1rem;
        font-size: 1.25rem;
    }

    .gacha-resume-confirm-btn {
        margin: 0.5rem 1rem 1rem;
        padding: 1.2rem 2.5rem;
        font-size: 1.5rem;
        min-height: 44px;
    }

    .gacha-ten-summary-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        padding: 0.75rem;
    }

    .gacha-ten-summary-card {
        padding: 0.5rem;
    }

    .gacha-ten-summary-name {
        font-size: 1.5rem;
    }

    .gacha-ten-summary-rarity {
        font-size: 1.25rem;
    }

    .gacha-ten-summary-duplicate {
        font-size: 1.25rem;
        padding: 0.15rem 0.4rem;
    }
}