/* 全局主题变量：统一管理颜色，后续修改更高效 */
:root {
    --primary-color: #ff6b6b; /* 主色：红色（点赞、边框等核心元素） */
    --secondary-color: #4ecdc4; /* 辅助色：青色（提示文本、次要元素） */
}

/* 全局样式重置：清除浏览器默认边距和盒模型，统一基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 盒模型：border和padding不影响元素总宽高 */
}

/* 页面主体样式：深色渐变背景，适配移动端触摸行为 */
body {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); /* 深色渐变，护眼且显质感 */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 无衬线字体，适配各设备 */
    color: #fff; /* 文字白色，与深色背景对比清晰 */
    min-height: 100vh; /* 最小高度占满屏幕，避免内容不足时背景断层 */
    overflow-x: hidden; /* 禁止水平滚动，防止页面变形 */
    touch-action: pan-y; /* 限制移动端仅垂直滑动，优化触摸体验 */
}

/* 主容器：控制页面最大宽度，实现居中布局 */
.app-container {
    max-width: 600px; /* 最大宽度600px，适配手机和小平板 */
    margin: 0 auto; /* 水平居中 */
    padding: 20px; /* 内边距，避免内容贴边 */
    position: relative; /* 作为子元素绝对定位的参考父级 */
}

/* 性别切换按钮：右上角悬浮样式 */
.gender-toggle {
    position: absolute; /* 绝对定位，脱离文档流 */
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1); /* 半透明白色背景，不遮挡下层内容 */
    border-radius: 15px; /* 圆角设计，更显柔和 */
    display: flex; /* 弹性布局，让图标垂直水平居中 */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 鼠标指针变手型，提示可点击 */
    z-index: 10; /* 层级较高，避免被其他元素遮挡 */
    transition: all 0.3s ease; /* 过渡动画，hover时平滑变化 */
    backdrop-filter: blur(10px); /* 背景模糊，增强毛玻璃质感 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* 轻微阴影，提升立体感 */
}

/* 性别切换按钮hover效果：放大+背景加深，反馈点击意图 */
.gender-toggle:hover {
    transform: scale(1.1); /* 放大10% */
    background: rgba(255, 255, 255, 0.2); /* 背景透明度提高 */
}

/* 通用图标样式：统一图标大小和适配方式 */
.icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain; /* 保持图标原有比例，不拉伸变形 */
}

/* 视频容器：控制视频显示区域的样式和比例 */
.video-wrapper {
    position: relative; /* 作为子元素（视频、控制按钮）绝对定位的参考 */
    border-radius: 20px; /* 圆角，与按钮风格统一 */
    overflow: hidden; /* 隐藏溢出内容，让视频也显示圆角 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 深色阴影，突出视频区域 */
    background: #000; /* 视频加载前显示黑色背景，避免白屏突兀 */
    margin-top: 30px; /* 与上方提示文本保持间距 */
    aspect-ratio: 9/16; /* 竖屏比例，适配手机全屏观看 */
    touch-action: pan-y; /* 仅允许垂直滑动，防止误触发水平滑动 */
}

/* 视频元素：占满容器，优化显示效果 */
#video-element {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 视频填充容器，裁剪多余部分，保持画面完整 */
    border-radius: 20px; /* 视频圆角，与容器一致 */
    cursor: default; /* 取消默认视频点击暂停，避免与双击点赞冲突 */
}

/* 装饰边框：视频容器外围的辅助边框，增强视觉层次 */
.decorative-border {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 3px solid var(--primary-color); /* 主色调边框 */
    border-radius: 30px; /* 圆角比容器大，形成外扩效果 */
    opacity: 0.3; /* 透明度30%，不遮挡视频内容 */
    pointer-events: none; /* 不响应点击/触摸事件，避免影响视频操作 */
}

/* 控制按钮容器：底部左右分布，适配竖屏操作习惯 */
.floating-controls {
    position: absolute; /* 绝对定位在视频容器底部 */
    bottom: 30px;
    left: 20px;
    right: 20px;
    display: flex; /* 弹性布局，让左右两组按钮分别靠两端 */
    justify-content: space-between;
    align-items: flex-end; /* 按钮组垂直底部对齐 */
}

/* 控制按钮组：垂直排列单个功能按钮 */
.control-group {
    display: flex;
    flex-direction: column; /* 垂直排列按钮 */
    gap: 20px; /* 按钮之间的间距，避免拥挤 */
}

/* 通用控制按钮样式：统一所有功能按钮的外观 */
.control-btn {
    background: rgba(255, 255, 255, 0.1); /* 半透明白色背景，毛玻璃效果 */
    border: none; /* 取消默认边框 */
    width: 50px;
    height: 50px;
    border-radius: 15px; /* 圆角设计 */
    backdrop-filter: blur(10px); /* 背景模糊，增强质感 */
    cursor: pointer; /* 手型指针，提示可点击 */
    transition: all 0.3s ease; /* 过渡动画，hover时平滑变化 */
    display: flex; /* 图标居中 */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* 阴影，提升立体感 */
}

/* 控制按钮hover效果：放大+背景加深，反馈交互意图 */
.control-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

/* 点赞按钮激活状态：图标变红+脉冲动画，明确反馈点赞成功 */
.like-btn.active .icon-img {
    /* 红色滤镜：将默认图标转为红色 */
    filter: brightness(0) saturate(100%) invert(58%) sepia(85%) saturate(4921%) hue-rotate(325deg) brightness(101%) contrast(101%);
    animation: pulse 0.5s; /* 脉冲动画，增强视觉反馈 */
}

/* 加载动画容器：视频加载时居中显示，提示用户等待 */
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完全居中（水平+垂直） */
    font-size: 40px;
    color: var(--primary-color); /* 主色调，与点赞颜色一致 */
    display: none; /* 默认隐藏，视频加载时显示 */
}

/* 加载图标旋转动画：无限循环旋转，提示加载中 */
.spinner {
    animation: fa-spin 2s infinite linear;
}

/* 动画定义：旋转（用于加载图标） */
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 动画定义：脉冲（用于点赞按钮激活、模式切换按钮） */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); } /* 中间放大20% */
    100% { transform: scale(1); } /* 恢复原大小 */
}

/* 动画定义：浮动（用于顶部提示文本） */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* 向上浮动10px */
    100% { transform: translateY(0px); } /* 回到原位置 */
}

/* 动画定义：弹出（用于模式切换通知） */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; } /* 缩小+透明 */
    100% { transform: scale(1); opacity: 1; } /* 恢复原大小+不透明 */
}

/* 动画定义：淡出（用于双击点赞时的爱心特效） */
@keyframes fadeOut {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -120%) scale(1.5); } /* 上移+放大 */
    100% { opacity: 0; transform: translate(-50%, -150%) scale(2); } /* 透明+上移+放大 */
}

/* 顶部提示文本样式：浮动动画+辅助色，吸引用户注意 */
.floating-text {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    color: var(--secondary-color); /* 辅助色，与主色区分 */
    font-weight: bold; /* 加粗，提高辨识度 */
    animation: float 2s infinite; /* 浮动动画，增加活力 */
}

/* 模式切换通知：顶部居中弹窗，提示用户模式已切换 */
.notification {
    position: fixed; /* 固定定位，不随页面滚动 */
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    background: rgba(0,0,0,0.7); /* 半透明黑色背景，不遮挡下层内容 */
    backdrop-filter: blur(10px); /* 毛玻璃效果，增强质感 */
    color: white; /* 白色文字，清晰可读 */
    padding: 10px 20px; /* 内边距，让弹窗更舒展 */
    border-radius: 50px; /* 圆形弹窗，更显柔和 */
    display: flex; /* 图标+文字横向排列 */
    align-items: center;
    gap: 10px; /* 图标和文字间距，避免拥挤 */
    animation: popIn 0.3s ease-out; /* 弹出动画，提示弹窗出现 */
    z-index: 100; /* 最高层级，确保不被其他元素遮挡 */
}

/* QQ分享按钮图标：通过背景图引入，避免img标签冗余 */
.qq-icon {
    width: 24px;
    height: 24px;
    background-image: url('https://tx.2cnm.cn/tp/qq.png'); /* QQ图标地址 */
    background-size: contain; /* 保持图标比例 */
    background-repeat: no-repeat; /* 不重复显示 */
}

/* 双击点赞特效：红色爱心，增强交互趣味性 */
.heart-effect {
    position: absolute;
    font-size: 60px;
    color: var(--primary-color); /* 主色调，与点赞按钮一致 */
    opacity: 0.8; /* 轻微透明，不遮挡视频 */
    pointer-events: none; /* 不响应事件，避免影响视频操作 */
    animation: fadeOut 1s forwards; /* 淡出动画，自动消失 */
}

/* 移动端适配：屏幕宽度≤480px时（手机竖屏）优化样式 */
@media (max-width: 480px) {
    .app-container {
        padding: 10px; /* 减小内边距，充分利用屏幕空间 */
    }
    .video-wrapper {
        margin-top: 20px; /* 减小与上方元素的间距 */
    }
    .gender-toggle {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px; /* 缩小性别切换按钮，适配小屏幕 */
    }
    .control-btn {
        width: 40px;
        height: 40px; /* 缩小功能按钮，避免遮挡视频 */
    }
}