/* ===================================
   超小屏幕优化 (≤320px)
   =================================== */
   @media (max-width: 320px) {
    .main-content {
        width: 80vw;
        height: 75vh;
        gap: clamp(10px, 1.5vh, 15px);
        padding: 12px;
    }
    
    .avatar-container {
        width: clamp(90px, 35vw, 120px);
        height: clamp(90px, 35vw, 120px);
    }
    
    .dynamic-role {
        font-size: clamp(1rem, 4.5vw, 1.8rem);
    }
    
    .cta-button {
        font-size: clamp(0.7rem, 3vw, 0.9rem);
        padding: clamp(6px, 1.5vw, 10px) clamp(12px, 2.5vw, 20px);
    }
}

/* ===================================
   无障碍和性能优化
   =================================== */

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .profile-svg {
        animation: none;
    }
    
    .role-text.typing::after {
        animation: none;
    }
    
    .intro-text,
    .cta-centered {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    * {
        transition-duration: 0.01s !important;
        animation-duration: 0.01s !important;
    }
}

/* 焦点状态 - 键盘导航 */
.cta-button:focus-visible,
.click-me-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    #overlay {
        background: rgba(0, 0, 0, 0.95);
    }
    
    .intro-text {
        color: #ffffff;
    }
    
    .cta-button,
    .click-me-btn {
        border: 2px solid #ffffff;
    }
}

/* ===================================
   DEBUG MODE STYLES（可选，用于开发调试）
   取消注释以启用边框调试
   =================================== */


/* .debug-mode #overlay {
    border: 3px solid #ff0000 !important;
}

.debug-mode .main-content {
    border: 3px solid #00ff00 !important;
    background: rgba(0, 255, 0, 0.1) !important;
}

.debug-mode .avatar-container {
    border: 3px solid #0000ff !important;
    background: rgba(0, 0, 255, 0.1) !important;
}

.debug-mode .intro-text-container {
    border: 3px solid #ffff00 !important;
    background: rgba(255, 255, 0, 0.1) !important;
}

.debug-mode .cta-centered {
    border: 3px solid #ff00ff !important;
    background: rgba(255, 0, 255, 0.1) !important;
}

.debug-mode .dynamic-role {
    border: 2px solid #00ffff !important;
    background: rgba(0, 255, 255, 0.1) !important;
} */


/* ===================================
   架构总结注释
   
   【母类层级】(无媒体查询)
   - #overlay: 9个纯共享属性
   - .main-content: 4个纯共享属性
   - .avatar-container: 5个纯共享属性
   - .intro-text-container: 5个纯共享属性
   - .intro-text: 5个纯共享属性
   - .dynamic-role: 8个纯共享属性
   - .cta-centered: 4个纯共享属性
   - .cta-button: 15个纯共享属性
   
   【手机子类】(无媒体查询，移动优先)
   - 所有手机特定属性直接写在母类后面
   - 包括: display flex, 70vw, order等
   
   【平板+桌面共享层】(@media min-width: 769px)
   - 两者共同属性，避免重复
   - 包括: display block, absolute定位等
   
   【平板子类】(@media 769px-1024px)
   - 平板特定尺寸和调整
   - 90vw, 14vw照片等
   
   【桌面子类】(@media min-width: 1025px)
   - 桌面特定尺寸和调整
   - 85vw, 30%照片等
   
   代码行数统计:
   - CSS变量: 25行
   - 基础重置: 10行
   - 母类定义: 60行
   - 手机子类: 50行
   - 平板+桌面共享: 40行
   - 平板子类: 45行
   - 桌面子类: 50行
   - 移动控制: 60行
   - 小屏优化: 30行
   - 无障碍: 25行
   - 总计: 约395行
   
   对比原始代码(570行): 减少31%
   对比过度优化版(355行): 增加11%（为了清晰度）
   
   优势:
   ✅ 母类绝对纯净，只包含真共享属性
   ✅ 三个设备子类独立清晰
   ✅ 有平板+桌面共享层避免过度重复
   ✅ 使用@keyframes避免transform冲突
   ✅ 代码结构清晰，易于维护
   ✅ 符合移动优先原则
   =================================== */
   /* ===================================
   INTRO PAGE STYLES - 纯净母类架构
   Eva Qi Personal Website - Pure Base Class Architecture
   
   架构说明：
   - 母类：只包含三个设备完全相同的属性
   - 手机子类：无媒体查询（移动优先）
   - 平板子类：@media (min-width: 769px) and (max-width: 1024px)
   - 桌面子类：@media (min-width: 1025px)
   - 平板+桌面共享：@media (min-width: 769px)
   =================================== */

/* ===================================
   CSS 自定义属性（全局变量）
   =================================== */
:root {
    /* 颜色系统 */
    --primary-gradient: linear-gradient(45deg, #f093fb, #f5576c);
    --secondary-gradient: linear-gradient(45deg, #f5576c, #f093fb);
    --primary-color: #f093fb;
    --secondary-color: #f5576c;
    --background-dark: #1a1a2e;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    
    /* 间距系统 */
    --spacing-xs: clamp(1px, 0.2vh, 2px);
    --spacing-sm: clamp(4px, 0.8vh, 8px);
    --spacing-md: clamp(8px, 1.6vh, 16px);
    --spacing-lg: clamp(16px, 3.2vh, 32px);
    --spacing-xl: clamp(24px, 4.8vh, 48px);
    
    /* 字体系统 */
    --font-primary: 'Scheherazade New', 'Times New Roman', serif;
    
    /* 过渡效果 */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-entry: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 6px 20px rgba(240, 147, 251, 0.3);
    --shadow-medium: 0 10px 30px rgba(240, 147, 251, 0.4);
}

/* ===================================
   基础重置
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: var(--background-dark);
    font-family: var(--font-primary);
    line-height: 1.6;
}

/* ===================================
   【母类】OVERLAY - 所有设备共享
   =================================== */
#overlay {
    /* 定位和层级 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    
    /* 布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* 视觉效果 */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    
    /* 填充 */
    padding: 20px;
    
    /* 可见性控制 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 用户选择 */
    user-select: none;
    -webkit-user-select: none;
}

#overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===================================
   【母类】MAIN-CONTENT - 纯净共享属性
   只包含三个设备完全相同的属性
   =================================== */
.main-content {
    /* 定位 */
    position: relative;
    margin: 0 auto;
    
    /* 间距 */
    padding: 10px;
    
    /* 文本对齐 */
    text-align: center;
}

/* 【手机子类】MAIN-CONTENT - 移动优先 */
.main-content {
    /* 布局系统 - 手机使用flex垂直堆叠 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* 尺寸 - 手机70vw节省空间 */
    width: 70vw;
    height: 75vh;
    
    /* 间距 - flex布局的gap */
    gap: clamp(15px, 2.5vh, 20px);
}

/* 【平板+桌面共享】MAIN-CONTENT */
@media (min-width: 769px) {
    .main-content {
        /* 布局切换 - 使用block以支持absolute定位 */
        display: block;
    }
}

/* 【平板子类】MAIN-CONTENT */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content {
        /* 尺寸 - 黄金比例 */
        width: min(90vw, 800px);
        height: calc(min(90vw, 800px) * 0.618);
        max-height: 65vh;
        
        /* 位置调整 - 视觉优化 */
        transform: translateY(clamp(-20px, -2vh, -10px));
    }
}

/* 【桌面子类】MAIN-CONTENT */
@media (min-width: 1025px) {
    .main-content {
        /* 尺寸 - 黄金比例，更大 */
        width: min(85vw, 900px);
        height: calc(min(85vw, 900px) * 0.618);
        max-height: 60vh;
        
        /* 位置调整 - 视觉优化 */
        transform: translateY(clamp(-20px, -1vh, -10px));
    }
}

/* ===================================
   【母类】AVATAR-CONTAINER - 纯净共享属性
   =================================== */
.avatar-container {
    /* 布局 - 所有设备都需要居中内容 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    
    /* 间距 */
    margin: 0;
}

/* 【手机子类】AVATAR-CONTAINER */
.avatar-container {
    /* 布局顺序 - flex布局中的顺序 */
    order: 1;
    
    /* 定位 - 手机使用relative自然流动 */
    position: relative;
    
    /* 尺寸 - 手机30vw适应小屏 */
    width: clamp(140px, 30vw, 180px);
    height: clamp(140px, 30vw, 180px);
}

/* 【平板+桌面共享】AVATAR-CONTAINER */
@media (min-width: 769px) {
    .avatar-container {
        /* 定位 - 绝对定位到右上角 */
        position: absolute;
        top: 0;
        right: 0;
        
        /* 层级 */
        z-index: 10;
    }
}

/* 【平板子类】AVATAR-CONTAINER */
@media (min-width: 769px) and (max-width: 1024px) {
    .avatar-container {
        /* 尺寸 - 平板14vw为文字腾空间 */
        width: clamp(100px, 14vw, 160px);
        height: clamp(100px, 14vw, 160px);
    }
}

/* 【桌面子类】AVATAR-CONTAINER */
@media (min-width: 1025px) {
    .avatar-container {
        /* 尺寸 - 桌面30%父容器尺寸 */
        width: 35%;
        height: 35%;
        right: 3%;
        top: 3%;
        min-width: clamp(150px, 20vw, 250px);  /* 增大最小尺寸 */
        min-height: clamp(150px, 20vw, 250px);
    }
}

/* 照片SVG样式 - 所有设备共享 */
.profile-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 clamp(6px, 1.5vw, 12px) clamp(12px, 2.5vw, 20px) rgba(0, 0, 0, 0.3)) 
            invert(1) sepia(1) saturate(2) hue-rotate(320deg) brightness(1.2);
    animation: professionalFloat 8s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
}

@keyframes professionalFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-4px) rotate(0.5deg); }
    66% { transform: translateY(-2px) rotate(-0.5deg); }
}

/* ===================================
   【母类】INTRO-TEXT-CONTAINER - 纯净共享属性
   =================================== */
.intro-text-container {
    /* 布局 - 所有设备都是flex column */
    display: flex;
    flex-direction: column;
    
    /* 间距 - 文字之间的间距 */
    gap: clamp(1px, 0.3vh, 3px);
    
    /* 边距 */
    margin: 0;
    padding: 0;
}

/* 【手机子类】INTRO-TEXT-CONTAINER */
.intro-text-container {
    /* 布局顺序 */
    order: 2;
    
    /* 定位 */
    position: relative;
    
    /* 尺寸 - 手机占满宽度 */
    width: 100%;
    height: auto;
    
    /* 对齐 - 手机居中 */
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 【平板+桌面共享】INTRO-TEXT-CONTAINER */
@media (min-width: 769px) {
    .intro-text-container {
        /* 定位 - 绝对定位到左侧 */
        position: absolute;
        top: 0;
        /* left: 0; */
        left: 2%; 
        top: 2%;
        
        /* 对齐 - 左对齐 */
        align-items: flex-start;
        text-align: left;
        
        /* 层级 */
        z-index: 5;
    }
}

/* 【平板子类】INTRO-TEXT-CONTAINER */
@media (min-width: 769px) and (max-width: 1024px) {
    .intro-text-container {
        /* 尺寸 - 2/3宽度，为照片留空间 */
        width: 70%;
        height: auto;
        
        /* 对齐 */
        justify-content: center;
    }
}

/* 【桌面子类】INTRO-TEXT-CONTAINER */
@media (min-width: 1025px) {
    .intro-text-container {
        /* 尺寸 - 75%宽度和高度 */
        width: 75%;
        height: 75%;
        
        /* 对齐 - 从顶部开始 */
        justify-content: flex-start;
    }
}

/* ===================================
   【母类】文字元素 - 所有设备共享
   =================================== */
.intro-text {
    /* 颜色和字体 */
    color: var(--text-primary);
    font-family: var(--font-primary);
    line-height: 1.3;
    
    /* 间距 */
    margin: var(--spacing-xs) 0;
    
    /* 动画准备 - 使用keyframes而不是transform */
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 进场动画 - 使用keyframes避免transform冲突 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 激活时启动动画 */
#overlay.active .intro-text {
    animation-play-state: running;
}

/* 未激活时暂停动画 */
#overlay:not(.active) .intro-text {
    animation-play-state: paused;
}

/* 【手机子类】文字大小 */
.intro-line-1 {
    /* font-size: clamp(1.4rem, 5vw, 1.8rem); */
    font-size: clamp(1.7rem, 6vw, 2.2rem); 
    font-weight: 400;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    animation-delay: 0.2s;
}

.intro-line-2 {
    /* font-size: clamp(1.6rem, 6vw, 2.2rem); */
    font-size: clamp(2rem, 7.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation-delay: 0.4s;
}

.intro-line-3 {
    /* font-size: clamp(1.4rem, 5vw, 1.8rem); */
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    font-weight: 400;
    animation-delay: 0.6s;
}

/* 【平板子类】文字大小 */
@media (min-width: 769px) and (max-width: 1024px) {
    .intro-line-1 {
        font-size: clamp(2rem, 5vw, 3rem);
        margin-bottom: clamp(4px, 0.8vh, 8px);
    }
    
    .intro-line-2 {
        font-size: clamp(1.8rem, 4.5vw, 2.8rem);
        margin-bottom: clamp(8px, 1.2vh, 16px);
    }
    
    .intro-line-3 {
        font-size: clamp(1.5rem, 3.5vw, 2.2rem);
        margin-bottom: clamp(4px, 0.8vh, 8px);
    }
}

/* 【桌面子类】文字大小 */
@media (min-width: 1025px) {
    .intro-line-1 {
        font-size: clamp(2rem, 4vw, 3.2rem);

        margin-bottom: clamp(4px, 0.8vh, 8px);
    }
    
    .intro-line-2 {
        /* font-size: clamp(2rem, 4vw, 3.2rem); */
        font-size: clamp(2rem, 4.2vw, 3.2rem);
        margin-bottom: clamp(8px, 1.2vh, 16px);
    }
    
    .intro-line-3 {
        /* font-size: clamp(1.6rem, 3.2vw, 2.4rem); */
        font-size: clamp(2rem, 4vw, 3.2rem);
        margin-bottom: clamp(4px, 0.8vh, 8px);
    }
}

/* ===================================
   动态角色 - DYNAMIC-ROLE
   =================================== */

/* 【母类】动态角色 */
.dynamic-role {
    /* 字体 */
    font-weight: 700;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    
    /* 布局 */
    display: flex;
    align-items: center;
    width: 100%;
    
    /* 文本处理 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 视觉效果 */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* 动画 */
    animation-delay: 0.8s;
}

/* 【手机子类】动态角色 */
.dynamic-role {
    /* font-size: clamp(1.7rem, 7vw, 2.6rem); */
    font-size: clamp(2.5rem, 10vw, 3.6rem); 
    min-height: clamp(40px, 6vh, 50px);
    justify-content: center;
    text-align: center;
}

/* 【平板子类】动态角色 */
@media (min-width: 769px) and (max-width: 1024px) {
    .dynamic-role {
        font-size: clamp(1.6rem, 4vw, 2.5rem);
        min-height: clamp(50px, 8vh, 70px);
        margin-bottom: clamp(20px, 3vh, 30px);
        justify-content: flex-start;
        text-align: left;
    }
}

/* 【桌面子类】动态角色 */
@media (min-width: 1025px) {
    .dynamic-role {
        margin-top: clamp(15px, 3vh, 30px);  /* ← 向下推 */
        font-size: clamp(2.5rem, 5.5vw, 3.8rem);
        min-height: clamp(55px, 8vh, 85px);
        margin-bottom: clamp(20px, 3vh, 40px);
        justify-content: flex-start;
        text-align: left;
    }
}

/* 角色文本样式 */
.role-text {
    opacity: 0;
    transition: all 0.4s ease;
    position: absolute;
    user-select: none;
    -webkit-user-select: none;
}

.role-text.active {
    opacity: 1;
    animation: roleSlideIn 0.4s ease forwards;
}

@keyframes roleSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.role-text.typing::after {
    content: '|';
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 角色颜色 */
.role-developer { color: #4facfe; }
.role-researcher { color: #50c878; }
.role-artist { color: #ff6b47; }
.role-educator { color: #ffd700; }
.role-entrepreneur { color: #dc143c; }
.role-connoisseur { color: #8e44ad; }

/* ===================================
   【母类】CTA-CENTERED - 按钮容器纯净共享
   =================================== */
.cta-centered {
    /* 布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 尺寸 */
    width: auto;
    
    /* 动画 - 使用keyframes */
    opacity: 0;
    animation: ctaFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}

@keyframes ctaFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 激活动画 */
#overlay.active .cta-centered {
    animation-play-state: running;
}

#overlay:not(.active) .cta-centered {
    animation-play-state: paused;
}

/* 【手机子类】CTA-CENTERED */
.cta-centered {
    /* 布局顺序 */
    order: 3;
    
    /* 定位 */
    position: relative;
    
    /* 间距 */
    margin-top: clamp(10px, 2vh, 20px);
    
    /* 层级 */
    z-index: 10;
}

/* 【平板+桌面共享】CTA-CENTERED */
@media (min-width: 769px) {
    .cta-centered {
        /* 定位 - 绝对定位到底部中心 */
        position: absolute;
        bottom: 5%;
        left: 50%;
        
        /* 居中 - 使用transform */
        transform: translateX(-50%);
        
        /* 重置间距 */
        margin: 0;
        
        /* 层级 */
        z-index: 15;
    }
    
    /* 重写动画，避免transform冲突 */
    @keyframes ctaFadeInDesktop {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    .cta-centered {
        animation: ctaFadeInDesktop 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
    }
}

/* ===================================
   【母类】CTA-BUTTON - 按钮所有设备共享
   =================================== */
.cta-button {
    /* 布局 */
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 8px);
    
    /* 尺寸 */
    padding: clamp(6px, 1.5vw, 10px) clamp(12px, 2.5vw, 20px);
    width: auto;
    min-width: auto;
    flex-shrink: 0;
    
    /* 视觉效果 */
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 50px;
    box-shadow: var(--shadow-soft);
    
    /* 字体 */
    font-family: var(--font-primary);
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    
    /* 交互 */
    cursor: pointer;
    transition: var(--transition-smooth);
    user-select: none;
    -webkit-user-select: none;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    background: var(--secondary-gradient);
}

.cta-button:active {
    transform: translateY(0);
}

.cta-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-arrow {
    transform: translateX(4px);
}

/* ===================================
   移动设备控制 - 所有设备共享基础
   =================================== */
.mobile-controls {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 40;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}

.mobile-controls.visible {
    display: flex;
}

.joystick-container {
    position: relative;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}

.joystick-base {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
}

.joystick-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: var(--primary-gradient);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
    box-shadow: var(--shadow-soft);
}

.joystick-handle.active {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.6);
}

.click-me-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
}

.click-me-btn {
    padding: 12px 24px;
    background: var(--primary-gradient);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    min-width: 120px;
}

.click-me-btn:hover,
.click-me-btn:active {
    background: var(--secondary-gradient);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-medium);
}

.click-me-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ===================================
   提示信息
   =================================== */
#timed-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    z-index: 102;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    pointer-events: none;
    font-family: var(--font-primary);
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#timed-hint.show {
    opacity: 1;
    visibility: visible;
}

/* 移动端隐藏提示 */
@media (max-width: 768px) {
    #timed-hint {
        display: none;
    }
}

/* ===================================
   小屏幕优化 (≤480px)
   =================================== */
@media (max-width: 480px) {
    .avatar-container {
        width: clamp(100px, 30vw, 140px);
        height: clamp(100px, 30vw, 140px);
    }
    
    .dynamic-role {
        font-size: clamp(1rem, 4vw, 1.6rem);
    }
    
    .cta-button {
        font-size: clamp(0.8rem, 3.5vw, 1rem);
        padding: clamp(8px, 2vw, 12px) clamp(16px, 3vw, 24px);
    }
    
    .joystick-container {
        width: 100px;
        height: 100px;
    }
    
    .joystick-handle {
        width: 35px;
        height: 35px;
    }
    
    .click-me-btn {
        font-size: 14px;
        padding: 10px 20px;
        min-width: 100px;
    }
}

/*