/* 游戏应用卡片样式 */
.gb-app-card {
    border-radius: 16px; /* 卡片圆角大小 */
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.15); /* 卡片阴影：X偏移 Y偏移 模糊度 颜色 */
    padding: 25px; /* 卡片内边距 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直方向排列子元素 */
    gap: 20px; /* 子元素之间的间距 */
    border: 1px solid #e1e8ff; /* 卡片边框：粗细 样式 颜色 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果：属性 时长 缓动函数 */
    margin: 20px 0; /* 卡片外边距：上下20px 左右0 */
}

/* 鼠标悬停时的卡片效果 */
.gb-app-card:hover {
    transform: translateY(-5px); /* 向上移动5像素 */
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.2); /* 增强阴影效果 */
}

/* 应用头部区域 */
.gb-app-header {
    display: flex; /* 使用弹性布局 */
    gap: 25px; /* 子元素之间的间距 */
    align-items: flex-start; /* 子元素顶部对齐 */
    flex-wrap: wrap; /* 允许子元素换行 */
}

/* 应用图标区域 */
.gb-app-icon-section {
    flex: 0 0 auto; /* 不放大 不缩小 自动宽度 */
}

/* 应用图标容器 */
.gb-app-icon {
    width: 200px !important;/* 图标宽度 - 要调整大小改这里 */
    height: 200px !important;/* 图标高度 - 要调整大小改这里 */
    border-radius: 22px; /* 图标圆角大小 */
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* 渐变背景：角度 开始颜色 位置 结束颜色 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    box-shadow: 0 8px 20px rgba(106, 17, 203, 0.3); /* 图标阴影 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 应用图标图片样式 */
.gb-app-icon img {
    width: 100%; /* 图片宽度占满容器 */
    height: 100%; /* 图片高度占满容器 */
    object-fit: cover; /* 保持比例填充容器 */
}

/* 应用图标字体图标样式 */
.gb-app-icon i {
    font-size: 100px !important; /* 字体图标大小 - 要调整大小改这里 */
    color: white; /* 字体图标颜色 */
}

/* 应用信息区域 */
.gb-app-info {
    flex: 1 1 300px; /* 可以放大 可以缩小 基础宽度300px */
    min-width: 0; /* 允许收缩到0 */
}

/* 应用标题样式 */
.gb-app-title {
    color: #2c3e50; /* 文字颜色 */
    font-size: 2.4rem !important; /* 字体大小 - 要调整大小改这里 */
    margin-bottom: 8px; /* 下边距 */
    font-weight: 700; /* 字体粗细：加粗 */
    line-height: 1.3; /* 行高 */
}

/* 应用版本样式 */
.gb-app-version {
    color: #3498db; /* 文字颜色 */
    font-weight: 600; /* 字体粗细：半粗 */
    margin-bottom: 15px; /* 下边距 */
    font-size: 1.2rem; /* 字体大小 - 要调整大小改这里 */
    background-color: #eff6ff; /* 背景颜色 */
    padding: 6px 12px; /* 内边距：上下6px 左右12px */
    border-radius: 8px; /* 圆角大小 */
    display: inline-block; /* 行内块元素 */
}

/* 应用描述样式 */
.gb-app-description {
    color: #64748b; /* 文字颜色 */
    margin-bottom: 20px; /* 下边距 */
    line-height: 1.7; /* 行高 */
    font-size: 1.2rem; /* 字体大小 - 要调整大小改这里 */
}

/* 应用详情列表容器 */
.gb-app-details {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 12px; /* 子元素之间的间距 */
    margin-bottom: 15px; /* 下边距 */
}

/* 单个详情项样式 */
.gb-detail-item {
    background-color: #f8fafc; /* 背景颜色 */
    padding: 8px 16px; /* 内边距：上下8px 左右16px */
    border-radius: 10px; /* 圆角大小 */
    font-size: 1.2rem; /* 字体大小 */
    color: #475569; /* 文字颜色 */
    font-weight: 500; /* 字体粗细：中等 */
    border: 1px solid #e2e8f0; /* 边框：粗细 样式 颜色 */
    display: inline-flex; /* 行内弹性布局 */
    align-items: center; /* 垂直居中 */
}

/* 详情项图标样式 */
.gb-detail-item i {
    margin-right: 6px; /* 右边距 */
    color: #94a3b8; /* 图标颜色 */
    font-size: 1.2rem; /* 图标大小 */
}

/* ===================== 下载区域样式 ===================== */

/* 下载区域容器 */
.gb-download-section {
    background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
    border-radius: 12px; /* 圆角大小 */
    padding: 20px; /* 内边距 */
    border: 1px solid #e1e8ff; /* 边框 */
    margin-top: 10px; /* 上边距 */
}

/* 下载区域标题 */
.gb-download-title {
    color: #2c3e50; /* 文字颜色 */
    font-size: 1.2rem; /* 字体大小 */
    font-weight: 600; /* 字体粗细：半粗 */
    margin-bottom: 15px; /* 下边距 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 子元素之间的间距 */
}

/* 下载标题图标 */
.gb-download-title i {
    color: #3498db; /* 图标颜色 */
}

/* 下载按钮容器 */
.gb-download-buttons {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 子元素之间的间距 */
}

/* 单个下载按钮包装器 */
.gb-download-btn-wrapper {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 5px; /* 按钮和二维码按钮之间的间距 */
    position: relative; /* 相对定位，为二维码弹出框定位 */
}

/* 下载按钮基础样式 */
.gb-download-btn {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: 15px 20px; /* 内边距：上下15px 左右20px - 要调整按钮大小改这里 */
    border-radius: 12px; /* 圆角大小 */
    color: white; /* 文字颜色 */
    font-weight: 600; /* 字体粗细：半粗 */
    text-decoration: none; /* 去除下划线 */
    transition: all 0.3s ease; /* 所有属性过渡效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
    min-width: 200px; /* 最小宽度 - 要调整按钮宽度改这里 */
}

/* 下载按钮悬停效果 */
.gb-download-btn:hover {
    transform: translateY(-3px); /* 向上移动3像素 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 增强阴影 */
}

/* 安卓下载按钮颜色 */
.gb-download-btn.android {
    background: linear-gradient(135deg, #3DDC84 0%, #2CA75C 100%); /* 绿色渐变 */
}

/* iOS下载按钮颜色 */
.gb-download-btn.ios {
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%); /* 蓝色渐变 */
}

/* GM助手下载按钮颜色 */
.gb-download-btn.gm {
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5A52 100%); /* 红色渐变 */
}

/* 下载按钮内图标容器 */
.gb-btn-icon {
    margin-right: 12px; /* 右边距 */
    font-size: 1.5rem; /* 图标大小 - 要调整大小改这里 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 36px; /* 图标容器宽度 - 要调整大小改这里 */
}

/* 下载按钮文字容器 */
.gb-btn-text {
    flex: 1; /* 占据剩余空间 */
    text-align: left; /* 文字左对齐 */
}

/* 下载按钮主文字 */
.gb-btn-main {
    font-size: 1.1rem; /* 字体大小 - 要调整大小改这里 */
    margin-bottom: 2px; /* 下边距 */
}

/* 下载按钮副文字（描述） */
.gb-btn-size {
    font-size: 0.85rem; /* 字体大小 - 要调整大小改这里 */
    opacity: 0.9; /* 透明度 */
}

/* ===================== 二维码按钮样式 ===================== */

/* 二维码按钮容器 */
.gb-qr-btn {
    width: 44px; /* 按钮宽度 - 要调整大小改这里 */
    height: 44px; /* 按钮高度 - 要调整大小改这里 */
    border-radius: 10px; /* 圆角大小 */
    background: #f8f9fa; /* 背景颜色 */
    border: 1px solid #e1e8ff; /* 边框 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    cursor: pointer; /* 鼠标指针变为手形 */
    color: #7f8c8d; /* 图标颜色 */
    font-size: 1.2rem; /* 图标大小 - 要调整大小改这里 */
    transition: all 0.3s ease; /* 所有属性过渡效果 */
    position: relative; /* 相对定位，为弹出框定位 */
}

/* 二维码按钮悬停效果 */
.gb-qr-btn:hover {
    background: #3498db; /* 背景颜色变为蓝色 */
    color: white; /* 图标颜色变为白色 */
    border-color: #3498db; /* 边框颜色变为蓝色 */
}

/* 二维码弹出框样式 */
.gb-qr-popup {
    position: absolute; /* 绝对定位 */
    bottom: 55px; /* 距离底部55px */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中修正 */
    background: white; /* 背景颜色 */
    border-radius: 12px; /* 圆角大小 */
    padding: 15px; /* 内边距 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 阴影效果 */
    z-index: 100; /* 层级，确保在最上面 */
    display: none; /* 默认隐藏 */
    border: 1px solid #e1e8ff; /* 边框 */
    min-width: 160px; /* 最小宽度 */
    text-align: center; /* 文字居中 */
}

/* 二维码弹出框下方的小三角 */
.gb-qr-popup::after {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    bottom: -8px; /* 距离底部-8px（在弹出框下方） */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中修正 */
    width: 0; /* 宽度为0 */
    height: 0; /* 高度为0 */
    border-left: 8px solid transparent; /* 左边框透明 */
    border-right: 8px solid transparent; /* 右边框透明 */
    border-top: 8px solid white; /* 上边框白色，形成三角形 */
}

/* 二维码图片样式 */
.gb-qr-popup img {
    width: 120px; /* 图片宽度 */
    height: 120px; /* 图片高度 */
    border-radius: 8px; /* 圆角大小 */
    margin-bottom: 8px; /* 下边距 */
}

/* 二维码描述文字 */
.gb-qr-popup span {
    font-size: 0.85rem; /* 字体大小 */
    color: #7f8c8d; /* 文字颜色 */
}

/* 鼠标悬停在二维码按钮上时显示弹出框 */
.gb-qr-btn:hover .gb-qr-popup {
    display: block; /* 显示弹出框 */
    animation: fadeIn 0.3s ease; /* 淡入动画 */
}

/* 淡入动画定义 */
@keyframes fadeIn {
    from { 
        opacity: 0; /* 开始透明度为0 */
        transform: translateX(-50%) translateY(10px); /* 开始位置向下10px */
    }
    to { 
        opacity: 1; /* 结束透明度为1 */
        transform: translateX(-50%) translateY(0); /* 结束位置回到原位 */
    }
}

/* GM助手说明样式 */
.gb-gm-note {
    background-color: rgba(255, 107, 107, 0.1); /* 半透明红色背景 */
    border-left: 4px solid #FF6B6B; /* 左边框：4px粗 实线 红色 */
    padding: 12px 15px; /* 内边距：上下12px 左右15px */
    border-radius: 0 8px 8px 0; /* 圆角：左上0 右上8px 右下8px 左下8px */
    margin-top: 20px; /* 上边距 */
    font-size: 0.9rem; /* 字体大小 */
    color: #c0392b; /* 文字颜色 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
}

/* GM助手说明图标 */
.gb-gm-note i {
    margin-right: 8px; /* 右边距 */
}

/* ===================== 响应式设计 ===================== */

/* 中等屏幕设备（最大宽度992px） */
@media (max-width: 992px) {
    .gb-download-buttons {
        flex-direction: column; /* 垂直排列按钮 */
    }
    
    .gb-download-btn-wrapper {
        width: 100%; /* 宽度占满容器 */
    }
    
    .gb-download-btn {
        min-width: 0; /* 取消最小宽度限制 */
        flex: 1; /* 占据剩余空间 */
    }
}

/* 小屏幕设备（最大宽度768px） */
@media (max-width: 768px) {
    .gb-app-header {
        flex-direction: column; /* 垂直排列头部内容 */
        text-align: center; /* 文字居中 */
    }
    
    .gb-app-icon {
        margin: 0 auto; /* 图标水平居中 */
    }
    
    .gb-app-details {
        justify-content: center; /* 详情项居中 */
    }
}
/* 垂直布局样式 */
.gb-app-header.vertical {
    flex-direction: column;
    text-align: center;
    gap: 20px;
}

.gb-app-header.vertical .gb-app-icon {
    margin: 0 auto;
}

/* 水平布局响应式 */
@media (max-width: 768px) {
    .gb-app-header.horizontal {
        flex-direction: column;
        text-align: center;
    }
    
    .gb-app-header.horizontal .gb-app-icon {
        margin: 0 auto;
    }
}

/* 按钮描述文字隐藏时的样式 */
.gb-btn-text:only-child .gb-btn-main {
    margin-bottom: 0;
}

/* 二维码悬停动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* ==================== 新增：支持动态属性的样式 ==================== */

/* 垂直布局样式 */
.gb-app-header.vertical {
    flex-direction: column;
    text-align: center;
    gap: 20px;
}

.gb-app-header.vertical .gb-app-icon {
    margin: 0 auto;
}

/* 水平布局在小屏幕上自动变垂直 */
@media (max-width: 768px) {
    .gb-app-header.horizontal {
        flex-direction: column;
        text-align: center;
    }
    
    .gb-app-header.horizontal .gb-app-icon {
        margin: 0 auto;
    }
}

/* 按钮描述文字隐藏时的样式 */
.gb-btn-text:only-child .gb-btn-main,
.gb-btn-text:has(.gb-btn-size:empty) .gb-btn-main {
    margin-bottom: 0;
}

/* 确保图标大小动态变化 */
.gb-app-icon {
    transition: width 0.3s ease, height 0.3s ease;
}

.gb-app-icon i {
    transition: font-size 0.3s ease;
}

/* 确保按钮大小动态变化 */
.gb-download-btn {
    transition: padding 0.3s ease;
}

.gb-btn-icon {
    transition: font-size 0.3s ease;
}

.gb-btn-main {
    transition: font-size 0.3s ease;
}

/* 二维码大小动态变化 */
.gb-qr-popup img {
    transition: width 0.3s ease, height 0.3s ease;
}

/* 卡片圆角动态变化 */
.gb-app-card {
    transition: border-radius 0.3s ease, padding 0.3s ease;
}

/* 颜色过渡效果 */
.gb-app-title,
.gb-app-version {
    transition: color 0.3s ease;
}

/* 背景渐变过渡 */
.gb-app-card,
.gb-app-icon {
    transition: background 0.3s ease;
}

/* 边框阴影过渡 */
.gb-app-card {
    transition: box-shadow 0.3s ease, border 0.3s ease;
}

/* 隐藏GM助手说明时的样式 */
.gb-gm-note[style*="display: none"] {
    display: none !important;
}

/* 隐藏版本信息时的样式 */
.gb-app-details[style*="display: none"] {
    display: none !important;
}

/* 隐藏二维码按钮时的样式 */
.gb-qr-btn[style*="display: none"] {
    display: none !important;
}

/* 垂直布局的特定调整 */
.vertical-layout .gb-app-header {
    align-items: center;
}

.vertical-layout .gb-app-info {
    text-align: center;
    width: 100%;
}

.vertical-layout .gb-app-details {
    justify-content: center;
}

/* 响应式二维码调整 */
@media (max-width: 480px) {
    .gb-qr-popup {
        transform: translateX(-50%) scale(0.9);
    }
    
    .gb-qr-popup img {
        width: 100px !important;
        height: 100px !important;
    }
}

/* 按钮描述文字为空时的对齐 */
.gb-btn-size:empty {
    display: none;
}

/* 确保动态内联样式优先级最高 */
.gb-app-card[style*="border-radius"] {
    border-radius: var(--card-radius) !important;
}

.gb-app-card[style*="padding"] {
    padding: var(--card-padding) !important;
}

.gb-app-card[style*="background"] {
    background: var(--card-bg) !important;
}

.gb-app-title[style*="color"] {
    color: var(--title-color) !important;
}

.gb-app-version[style*="color"] {
    color: var(--version-color) !important;
}

.gb-app-icon[style*="width"] {
    width: var(--icon-width) !important;
}

.gb-app-icon[style*="height"] {
    height: var(--icon-height) !important;
}

.gb-app-icon i[style*="font-size"] {
    font-size: var(--icon-font-size) !important;
}

.gb-download-btn[style*="padding"] {
    padding: var(--button-padding) !important;
}

.gb-btn-icon[style*="font-size"] {
    font-size: var(--button-icon-size) !important;
}

.gb-btn-main[style*="font-size"] {
    font-size: var(--button-font-size) !important;
}

.gb-qr-popup img[style*="width"] {
    width: var(--qr-size) !important;
}

.gb-qr-popup img[style*="height"] {
    height: var(--qr-size) !important;
}