/**
 * 维度中心样式
 * 负责第二屏的整体布局和样式
 */

/* 变量定义 */
:root {
    --floating-sidebar-width: 64px; /* 引用悬浮条的宽度，保持一致 */
}

/* 容器整体样式 */
.dimension-hub-container {
    display: flex; 
    align-items: flex-start; /* 新增或确保此行存在 */
    gap: 20px; 
    padding: 20px; /* 修改：左右也添加20px的padding，之前右侧是0 */
    box-sizing: border-box;
    background-color: #222222; 
    width: 100%; /* 新增：确保容器宽度为100% */
    max-width: 1600px; /* 给维度中心一个更宽松的最大宽度，但由.card-area控制实际内容区宽度 */
    margin: auto; /* 修改为 margin: auto; 尝试让它在 flex 容器中也居中 */
    /* background-color: blue; */ /* 临时添加背景色以便调试 */
}

/* 移除：不再直接控制侧边栏对齐和高度，交由其自身和默认Flex行为处理 */
/*
.floating-sidebar-container {
    align-self: flex-start;
    width: var(--floating-sidebar-width, 60px);
    flex-shrink: 0;
    max-height: 600px;
}
*/

/* 新增：控制侧边栏在维度中心父容器中的布局 */
/* <<< 移除以下特定于维度中心的侧边栏样式 >>> */

.dimension-hub-container > .floating-sidebar-container {
    margin-top: 23.5px; 
    /* min-height: 600px; */ /* <--- 移除或注释掉这行 */
    align-self: flex-start; 
}

/* 移除：多屏模式下的左边距现在由外层second-screen统一控制 */
/* html.multi-screen-mode .dimension-hub-container {
    padding-left: 20px;
} */

/* 新增：dimension-hub-container的响应式断点 - 确保在不同屏幕下正确适配 */
@media (max-width: 1200px) {
    /* 移除：padding-left现在由外层second-screen控制 */
    /* html.multi-screen-mode .dimension-hub-container {
        padding-left: 15px;
    } */
    
    .dimension-hub-container {
        padding: 15px; /* 减少整体内边距 */
        gap: 15px; /* 减少组件间距 */
    }
    
    .card-area {
        max-width: 1100px; /* 减少最大宽度 */
    }
}

@media (max-width: 992px) {
    /* 移除：padding-left现在由外层second-screen控制 */
    /* html.multi-screen-mode .dimension-hub-container {
        padding-left: 10px;
    } */
    
    .dimension-hub-container {
        padding: 12px; /* 进一步减少内边距 */
        gap: 12px; /* 进一步减少间距 */
    }
    
    .card-area {
        max-width: 950px; /* 进一步减少最大宽度 */
    }
}

/* 移除第一个768px断点 - 合并到下面的详细断点中 */
/* @media (max-width: 768px) {
    .dimension-hub-container {
        padding: 10px;
        gap: 10px;
    }
    
    .card-area {
        max-width: 100%;
    }
} */

@media (max-width: 600px) {
    .dimension-hub-container {
        padding: 8px; /* 超小屏幕最小内边距 */
        gap: 8px; /* 超小屏幕最小间距 */
    }
    
    .card-area {
        max-width: 100%; /* 超小屏幕占满可用宽度 */
    }
    
    .left-cards {
        gap: 6px; /* 超小屏幕最小间距 */
    }
    
    .card-column {
        flex-basis: 100%; /* 确保单列 */
        min-width: 100px; /* 进一步减小最小宽度 */
        max-width: 100%;
    }
    
    .right-card {
        width: 60px; /* 超小屏幕最小宽度 */
        flex-shrink: 0;
    }
}

/* 新增：极小屏幕断点（手机横屏等） */
@media (max-width: 480px) {
    .dimension-hub-container {
        padding: 6px;
        gap: 6px;
    }
    
    .left-cards {
        gap: 4px;
    }
    
    .card-column {
        flex-basis: auto; /* 自动高度 */
        min-width: 90px; /* 最小可用宽度 */
        width: 100%;
    }
    
    .right-card {
        width: 50px;
        flex-shrink: 0;
    }
}

html.multi-screen-mode .dimension-hub-container > .floating-sidebar-container {
    display: none; /* 在多屏模式下隐藏原位置的悬浮条容器（因为悬浮条已经fixed定位） */
}

/* 但要确保悬浮条本身仍然可见 */
html.multi-screen-mode .floating-sidebar-container {
    display: flex !important; /* 强制显示悬浮条 */
}


.dimension-hub-main-content {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 保持 stretch，让子元素撑满宽度 */
    padding-left: 0; /* 修改：移除左内边距，因为父容器已经有padding */
    flex-grow: 1; 
    box-sizing: border-box;
    min-width: 0; /* 新增：防止内容将此弹性项撑开得过宽 */
}

/* 翻牌器容器样式 */
#flipboard-container {
    border-radius: 8px; 
    width: fit-content; /* 保持fit-content，让内部元素决定其基础宽度 */
    max-width: 100%;    /* 新增：确保翻牌器容器不超过其父容器的宽度 */
    margin: 25px auto 40px auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, border 0.3s ease-in-out;
    border: none; 
    box-sizing: border-box; 
    overflow-x: auto; /* 新增：如果内部还是超宽，至少允许水平滚动而不是直接溢出 */
    -webkit-overflow-scrolling: touch; /* iOS Safari 滚动优化 */
}

/* 翻牌器克隆体相关CSS已删除 - 使用原始翻牌器 */

/* --- 新布局：卡片区域 --- */
.card-area {
    display: flex;
    gap: 20px; 
    width: 100%; /* 确保卡片区域利用其父容器的全部可用宽度 */
    max-width: 1350px; /* 新增：给卡片区域一个最大宽度 */
    margin: 0 auto; /* 修改：使其在父容器中水平居中 */
    align-items: flex-start;    
    position: relative; 
    top: -10px; 
    /* flex-grow: 1; */ /* 移除此行，让其高度由内容决定，不再强制填满垂直空间 */
}   

/* --- 新布局：左侧卡片容器 --- */
.left-cards {
    display: flex;
    gap: 20px; 
    flex: 3; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    /* +++ 新增：第二屏卡片滚动隐藏过渡效果 +++ */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* +++ 结束新增 +++ */
}

/* --- 新增：卡片列样式 --- */
.card-column {
    display: flex;
    flex-direction: column; 
    gap: 20px; 
    flex: 1 1 220px; /* 修改：基础宽度调整为220px，允许收缩和增长 */
    min-width: 200px; /* 基础最小宽度，但可被媒体查询覆盖 */
}

/* --- 新布局：右侧卡片容器 --- */
.right-card {
    /* flex: 1; */ /* 移除，不再按比例分配 */
    width: 90px; /* 新增：给右侧卡片一个固定的宽度 */
    flex-grow: 0; /* 新增：不允许增长 */
    flex-shrink: 0; /* 新增：确保右侧卡片不会被压缩 */
    /* min-height: 600px; */ /* 移除固定高度，让其根据内容自适应 */
}

/* --- 更新：左侧三个卡片样式 --- */
.entry-card {
    background-color: #333; 
    color: #fff; 
    border-radius: 12px; 
    padding: 10px; /* 恢复原始padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    /* height: 150px; */ /* 旧高度 */
    min-height: 180px; /* 修改为 min-height 以允许内容撑开, 150px * 1.2 = 180px */
    display: flex;
    flex-direction: column; /* 修改：允许内容垂直排列 */
    justify-content: center; /* 恢复原始justify-content */
    /* align-items: center; */ /* 移除，让文本左对齐 */
    text-align: left; /* 修改：文本左对齐 */
    font-size: 1.1em;
    width: 100%; /* 确保卡片填满其父列 */
    box-sizing: border-box; /* 配合width: 100% 和 padding */
    transition: all 0.3s ease; /* 新增：平滑过渡效果 */
    cursor: pointer; /* 新增：鼠标指针样式 */
}

/* 新增：入口卡片悬停"跳一下"效果 - 取消弹起，只保留阴影 */
.entry-card:hover {
    /* 取消弹起：transform: translateY(-5px); */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* 新增：顶部对齐的卡片基类 */
.entry-card-top-aligned {
    background-color: #333; 
    color: #fff; 
    border-radius: 12px; 
    padding: 10px; /* 垂直padding为0，水平padding保持20px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    min-height: 180px; 
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; /* 内容从顶部开始排列 */
    text-align: left; 
    font-size: 1.1em;
    width: 100%; 
    box-sizing: border-box; 
    transition: all 0.3s ease; /* 新增：平滑过渡效果 */
    cursor: pointer; /* 新增：鼠标指针样式 */
}

/* 新增：顶部对齐卡片悬停效果 - 取消弹起，只保留阴影 */
.entry-card-top-aligned:hover {
    /* 取消弹起：transform: translateY(-5px); */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* 新增：顶部对齐的高卡片 */
.entry-card-top-aligned-tall {
    background-color: #333; 
    color: #fff; 
    border-radius: 12px; 
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    min-height: 305px; /* 与 entry-card-tall-left 保持一致的高度 */
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; /* 内容从顶部开始排列 */
    text-align: left; 
    font-size: 1.1em;
    width: 100%; 
    box-sizing: border-box; 
    transition: all 0.3s ease; /* 新增：平滑过渡效果 */
    cursor: pointer; /* 新增：鼠标指针样式 */
}

/* 新增：顶部对齐高卡片悬停效果 - 取消弹起，只保留阴影 */
.entry-card-top-aligned-tall:hover {
    /* 取消弹起：transform: translateY(-5px); */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* --- 新增：半高卡片样式 --- */
.entry-card-half {
    background-color: #333; 
    color: #fff; 
    border-radius: 12px; 
    padding: 15px; /* 减少内边距以适应更小高度 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    min-height: 142.5px; /* 原 entry-card min-height 是 150px，这里设为略小于一半, 157.5px - 15px = 142.5px */
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    text-align: left; 
    font-size: 1em; /* 略微减小字体大小 */
    transition: all 0.3s ease; /* 新增：平滑过渡效果 */
    cursor: pointer; /* 新增：鼠标指针样式 */
}

/* 新增：半高卡片悬停效果 - 取消弹起，只保留阴影 */
.entry-card-half:hover {
    /* 取消弹起：transform: translateY(-5px); */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* --- 新增：右侧高卡片样式 --- */
.entry-card-tall {
    background-color: #333; 
    color: #fff; 
    border-radius: 12px; 
    padding: 20px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    width: 100%; 
    /* min-height: 508px; */ /* 修改前 */
    min-height: 503px; /* 恢复：原始计算高度 -> 修改为新的目标高度 503px */
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    font-size: 1.1em;
    transition: all 0.3s ease; /* 新增：平滑过渡效果 */
    cursor: pointer; /* 新增：鼠标指针样式 */
}

/* 新增：右侧高卡片悬停效果 - 取消弹起，只保留阴影 */
.entry-card-tall:hover {
    /* 取消弹起：transform: translateY(-5px); */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* --- 新增：左侧下方的高卡片样式 --- */
.entry-card-tall-left {
    background-color: #333; 
    color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%; 
    /* min-height: 338px; */ /* 修改前 */
    min-height: 305px; /* 恢复：原始计算高度, 335px - 30px = 305px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    font-size: 1.1em;
    transition: all 0.3s ease; /* 新增：平滑过渡效果 */
    cursor: pointer; /* 新增：鼠标指针样式 */
}

/* 新增：左侧下方高卡片悬停效果 - 取消弹起，只保留阴影 */
.entry-card-tall-left:hover {
    /* 取消弹起：transform: translateY(-5px); */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* --- 新增：让卡片内的文本换行 --- */
.dimension-card-content h2,
.dimension-card-content p {
    word-wrap: break-word; /* 允许长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器 */
    white-space: normal; /* 允许正常换行 */
}

/* 维度导航容器 - 暂时隐藏，但保留样式 */
#dimension-nav-container {
    width: 100%; /* 宽度填充主内容区 */
    /* max-width: 1200px; */ /* 移除最大宽度，让它填充 */
    margin: 0 auto; /* 确保在主内容区居中 */
    padding: 20px 0;
}

/* 分区容器 - 暂时隐藏，但保留样式 */
#section-display-container {
    width: 100%; /* 宽度填充主内容区 */
}

/* 权限分区容器 */
.section-container {
    width: 100%;
    padding: 40px 0;
    transition: background-color 0.3s ease;
}

/* 基础统计区 - 蓝色背景 */
.section-basic {
    background-color: rgba(30, 144, 255, 0.1);
    border-top: 2px solid rgba(30, 144, 255, 0.3);
}

/* 进阶统计区 - 绿色背景 */
.section-advanced {
    background-color: rgba(0, 128, 0, 0.1);
    border-top: 2px solid rgba(0, 128, 0, 0.3);
}

/* 深度统计区 - 橙色背景 */
.section-deep {
    background-color: rgba(255, 140, 0, 0.1);
    border-top: 2px solid rgba(255, 140, 0, 0.3);
}

/* 会员专享区 - 紫色背景 */
.section-exclusive {
    background-color: rgba(128, 0, 128, 0.1);
    border-top: 2px solid rgba(128, 0, 128, 0.3);
}

/* 锁定维度样式 */
.dimension-card.locked {
    filter: grayscale(0.7);
    opacity: 0.8;
}


.lock-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
}

/* 维度图标 */
.dimension-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    position: relative;
}

.dimension-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 维度名称 */
.dimension-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffffff;
}

/* 维度描述 */
.dimension-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* 升级按钮 */
.upgrade-button {
    margin-top: 15px;
    padding: 5px 15px;
    background-color: #1e90ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.upgrade-button:hover {
    background-color: #0078f0;
}

/* 响应式设计 */

/* 桌面端 */
.dimension-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}

/* 平板端和大屏笔记本 - 增强选择器优先级 */
@media (max-width: 1200px) { 
    .second-screen .dimension-hub-container .card-column,
    .dimension-hub-container .card-column {
        flex: 1 1 calc(33.33% - 14px) !important; /* 增加!important确保优先级 */
        min-width: 160px !important; /* 强制覆盖基础样式 */
    }
    .second-screen .dimension-hub-container .left-cards,
    .dimension-hub-container .left-cards {
        flex: 2 !important; 
        gap: 18px !important; /* 轻微减小间距 */
        flex-wrap: wrap !important; /* 确保允许换行，配合三列布局 */
    }
    .second-screen .dimension-hub-container .right-card,
    .dimension-hub-container .right-card {
        width: 85px !important; 
        flex-shrink: 0 !important; 
    }
}

/* 中等屏幕适配 - 强制双列布局 */
@media (max-width: 992px) { 
    .second-screen .dimension-hub-container .left-cards,
    .dimension-hub-container .left-cards {
         gap: 15px !important; 
         flex-wrap: wrap !important; /* 确保允许换行，配合双列布局 */
    }
    .second-screen .dimension-hub-container .card-column,
    .dimension-hub-container .card-column {
        flex: 1 1 calc(50% - 10px) !important; /* 强制双列布局 */
        min-width: 140px !important; /* 进一步减小最小宽度 */
        max-width: calc(50% - 10px) !important; /* 确保不超过50%宽度 */
    }
    .second-screen .dimension-hub-container .right-card,
    .dimension-hub-container .right-card {
        width: 80px !important; 
        flex-shrink: 0 !important; 
    }
     #flipboard-container {
        transform: scale(0.95) !important; /* 轻微缩小翻牌器 */
        margin-bottom: 30px !important;
    }
}

/* 小屏幕适配 - 强制单列布局 */
@media (max-width: 768px) { 
    /* 强化选择器权重，确保覆盖父级样式 */
    .second-screen .dimension-hub-container,
    .dimension-hub-container {
        padding: 15px !important; /* 减小整体内边距 */
        gap: 15px !important;
        width: 100% !important; /* 确保占满父容器宽度 */
        max-width: none !important; /* 移除任何最大宽度限制 */
    }
    .second-screen .dimension-hub-container .left-cards,
    .dimension-hub-container .left-cards {
        gap: 10px !important;
        flex-direction: column !important; /* 强制垂直布局 */
        flex-wrap: nowrap !important; /* 关键修复：禁用换行，配合垂直布局 */
        width: 100% !important; /* 确保占满可用宽度 */
    }
    .second-screen .dimension-hub-container .card-column,
    .dimension-hub-container .card-column {
        flex: 0 0 auto !important; /* 修复：不允许伸缩，使用自然大小 */
        min-width: unset !important; /* 移除最小宽度限制 */
        max-width: none !important; /* 移除最大宽度限制 */
        width: 100% !important; /* 明确设置宽度为100% */
    }
    .second-screen .dimension-hub-container .right-card,
    .dimension-hub-container .right-card {
        width: 75px !important; /* 在此断点略微减小固定宽度 */
        flex-shrink: 0 !important; /* 保持不允许收缩 */
    }
    #flipboard-container {
        transform: scale(0.9) !important;
        margin-bottom: 25px !important;
    }
    .entry-card, .entry-card-top-aligned, .entry-card-top-aligned-tall, .entry-card-half, .entry-card-tall, .entry-card-tall-left {
        font-size: 1em !important; /* 适当减小卡片内字体 */
        padding: 8px !important;
    }
}

/* 针对极小PC屏幕或特殊比例，确保内容不会溢出或过度压缩 */
@media (max-width: 600px) {
    .second-screen .dimension-hub-container,
    .dimension-hub-container {
        padding: 10px !important; /* 最小屏幕减少内边距 */
        gap: 10px !important; /* 最小间距 */
        width: 100% !important; /* 确保占满可用宽度 */
        max-width: none !important; /* 移除任何最大宽度限制 */
    }
    
    .second-screen .dimension-hub-container .left-cards,
    .dimension-hub-container .left-cards {
        gap: 8px !important; /* 进一步减小卡片间距 */
        flex-direction: column !important; /* 确保垂直布局 */
        flex-wrap: nowrap !important; /* 关键修复：禁用换行 */
        width: 100% !important; /* 确保占满可用宽度 */
    }
    
    .second-screen .dimension-hub-container .card-column,
    .dimension-hub-container .card-column {
        flex: 0 0 auto !important; /* 修复：使用自然大小 */
        min-width: unset !important; /* 移除最小宽度限制 */
        max-width: none !important; /* 移除最大宽度限制 */
        width: 100% !important; /* 明确设置宽度 */
    }
    
    .second-screen .dimension-hub-container .right-card,
    .dimension-hub-container .right-card {
        width: 70px !important; /* 进一步缩小右侧卡片 */
        flex-shrink: 0 !important;
    }
    
    #flipboard-container {
        transform: scale(0.85) !important; /* 进一步缩小翻牌器 */
        margin-bottom: 20px !important;
    }
    
    /* 悬浮翻牌器克隆体超小屏幕适配 */
    #flipboard-floating-clone {
        left: 50%; /* 居中显示 */
        max-width: calc(100% - 60px); /* 保持足够边距 */
        top: 35px; /* 最低位置 */
        transform: translateX(-50%) scale(0.85); /* 同样缩小并居中 */
    }
    
    .entry-card, .entry-card-top-aligned, .entry-card-top-aligned-tall, 
    .entry-card-half, .entry-card-tall, .entry-card-tall-left {
        font-size: 0.9em; /* 最小字体 */
        padding: 6px; /* 最小内边距 */
        min-height: 120px; /* 保持最小高度 */
    }
    
    /* 特别处理高卡片在超小屏幕下的适配 */
    .entry-card-tall, .entry-card-tall-left {
        min-height: 140px; /* 高卡片的最小高度 */
    }
}

/* 小屏幕适配增强 - 针对768px断点 */
@media (max-width: 768px) { 
    .dimension-hub-container {
        padding: 10px; /* 小屏幕减小内边距 */
        gap: 10px; /* 小间距 */
    }
    
    .card-area {
        max-width: 100%; /* 小屏幕占满可用宽度 */
    }
    
    .left-cards {
        gap: 8px; /* 进一步减小卡片间距 */
    }
    
    .card-column {
        flex-basis: 100%; /* 单列布局 */
        min-width: 110px; /* 进一步减小最小宽度，允许窄屏幕适配 */
        max-width: 100%; /* 确保不超出容器 */
    }
    
    .right-card {
        width: 70px; /* 进一步减小右侧卡片宽度 */
        flex-shrink: 0;
    }
    
    #flipboard-container {
        transform: scale(0.9);
        margin-bottom: 25px;
    }
    
    /* 悬浮翻牌器克隆体小屏幕适配 */
    #flipboard-floating-clone {
        left: calc(50% + 20px); /* 适当偏移避开悬浮条 */
        max-width: calc(100% - 100px); /* 考虑悬浮条空间 */
        top: 45px;
        transform: translateX(-50%) scale(0.9); /* 缩小并居中 */
    }
    
    .entry-card, .entry-card-top-aligned, .entry-card-top-aligned-tall, 
    .entry-card-half, .entry-card-tall, .entry-card-tall-left {
        font-size: 1em; /* 适当减小卡片内字体 */
        padding: 8px;
        min-height: 130px; /* 小屏幕下的合适高度 */
    }
    
    /* 高卡片特别处理 */
    .entry-card-tall, .entry-card-tall-left {
        min-height: 150px;
    }
}

/* 中等屏幕适配 - 针对992px断点 */
@media (max-width: 992px) { 
    .left-cards {
         gap: 15px; 
    }
    
    .card-column {
        flex-basis: calc(50% - 10px); /* 双列布局 */
        min-width: 140px; /* 进一步减小最小宽度，改善中等屏幕适配 */
    }
    
    .right-card {
        width: 80px; 
        flex-shrink: 0; 
    }
    
    #flipboard-container {
        transform: scale(0.95); /* 轻微缩小翻牌器 */
        margin-bottom: 30px;
    }
    
    /* 悬浮翻牌器克隆体中等屏幕适配 */
    #flipboard-floating-clone {
        left: calc(50% + 30px); /* 中等偏移 */
        max-width: calc(100% - 110px);
        top: 50px;
        transform: translateX(-50%) scale(0.95);
    }
    
    /* 注释掉：多屏模式下的左边距现在由外层second-screen统一控制 */
    /* html.multi-screen-mode .dimension-hub-container {
        padding-left: 90px;
    } */
}

/* 平板端适配 - 针对1200px断点 */
@media (max-width: 1200px) { 
    .card-column {
        flex-basis: calc(33.33% - 14px); /* 三列布局 */
        min-width: 180px; 
    }
    
    .left-cards {
        flex: 2; /* 调整左右比例 */
    }
    
    .right-card {
        width: 85px; 
        flex-shrink: 0; 
    }
    
    /* 悬浮翻牌器克隆体大屏幕适配 */
    #flipboard-floating-clone {
        left: calc(50% + 35px); /* 大屏幕偏移 */
        max-width: calc(100% - 120px);
        top: 55px;
        transform: translateX(-50%); /* 大屏幕不需要缩放 */
    }
}

/* 移除之前针对手机的更极端的 grid-template-columns 更改 */
/* @media (max-width: 480px) { ... } */

/* --- 新增：特定覆盖 section_indicator 卡片的样式 --- */
#dimension-card-section_indicator.entry-card-tall {
    /* padding: 0; */ /* 移除内边距，让 wrapper 可以占满 */
    padding: 10px; /* 调整：给整个右侧卡片一些内边距，让LOGO有"悬浮"的空间 */
    align-items: stretch; /* 使 .dimension-level-indicator-wrapper 垂直方向撑满 */
    /* background-color: #333; */ /* 卡片背景色保持不变 */
}

/* --- 维度层级指示器 LOGO 样式 (模仿通用LOGO风格) --- */
.dimension-card.entry-card-tall .dimension-level-indicator-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* 让两个LOGO条在水平方向上居中 */
    justify-content: space-between; /* 在垂直方向上将两个LOGO尽可能分开，并留出空间 */
    width: 100%; /* wrapper 占满卡片可用宽度 */
    height: 100%; /* wrapper 占满卡片可用高度 */
    box-sizing: border-box;
    /* padding: 15px 0; */ /* 新增：wrapper的上下内边距，提供整体的上下留白 */ /* 移除wrapper的内边距，让LOGO的margin控制间距 */
}

.dimension-level-logo { /* 通用给两个竖向LOGO条的基础样式 */
    /* flex: 1; */ /* 移除flex:1，不再强制撑满垂直空间 */
    /* width: 80px; */ /* 新增：设置固定宽度，小于卡片宽度 */
    width: 58px; /* 新宽度：45px * 1.3 = 58.5px, rounded */
    /* height: calc(50% - 20px); */ /* 新增：计算高度，使其占约一半并留出间隙 (20px是间隙的一半) */ /* 高度将由各自的特定类定义 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 5px; */ /* 移除内边距，因为固定宽高，文字居中 */
    /* border-radius: 22.5px / 10px; */ /* 如果宽度是45px，尝试一个更细长的椭圆 */
    border-radius: 20px; /* 新圆角，配合58px宽度 */
    box-sizing: border-box;
    color: #ffffff; 
    /* font-family: Arial, sans-serif; */
    font-size: 1em; /* 修改：增大字号 */
    font-weight: bold; 
    text-align: center; /* 新增，确保文字在父容器内居中 */
    writing-mode: vertical-rl; /* 新增，文字垂直排列 */
    text-orientation: mixed; /* 新增，保持字符正向 */
    letter-spacing: 10px; /* 修改：减小字符间距 */
    padding: 8px 0; /* 恢复对称的上下内边距 */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.3s ease-in-out, border 0.3s ease-in-out; /* 平滑过渡 - 合并 transform 和辉光过渡 */
}

.dimension-level-logo .vertical-text {
    /* writing-mode: vertical-rl; */
    /* text-orientation: mixed; */
    transform: rotate(0deg); /* 确保文字是直立的，而不是旋转90度 */
    white-space: normal; /* 允许文字在需要时换行 */
    /* font-size: 18px; */ /* 调整后适合竖排的字体大小 */
    line-height: 1.2; /* 调整行高以适应垂直文本 */
}

/* 竖向基础LOGO - 模仿通用基础LOGO */
.dimension-level-logo.vertical-basic-logo-style {
    /* background-color: #778899; */ /* 淡墨兰 from common basic-logo */
    background: linear-gradient(to bottom, #5F7C9D, #4A6078); /* 蓝色系背景 */
    color: #ffffff; /* from common basic-logo */
    /* 为顶部条块添加顶部圆角，为底部条块添加底部圆角，使整体像一个圆角矩形被分割 */
    /* border-top-left-radius: 8px; */  /* 调整后的圆角 */
    /* border-top-right-radius: 8px; */ /* 调整后的圆角 */
    /* border-bottom-left-radius: 0; */ /* 底部不圆角 */
    /* border-bottom-right-radius: 0; */ /* 底部不圆角 */
    height: 155px; /* 新高度 */
    /* margin-top: 25px; */ /* 新增：调整顶部间距 */
    margin-top: 6px; /* 进一步调整：基础LOGO往上一点 */
    /* margin-bottom 移除，由 space-between 和下一个元素的 margin-top 控制 */
    margin-bottom: 32px; /* 新增：明确设置与进阶LOGO的间隙 -> 修改为32px */
    /* transform: translateY(1px); */ /* 移除：此调整无效 */
}

/* 竖向进阶LOGO - 模仿通用进阶LOGO */
.dimension-level-logo.vertical-advanced-logo-style {
    /* background-color: #525860; */ /* 稍深灰色 from common advanced-logo */
    background-color: #525860; /* 改为纯色深灰 */
    color: #ffffff; /* from common advanced-logo */
    /* border-top-left-radius: 0; */ /* 顶部不圆角 */
    /* border-top-right-radius: 0; */ /* 顶部不圆角 */
    /* border-bottom-left-radius: 8px; */ /* 调整后的圆角 */
    /* border-bottom-right-radius: 8px; */ /* 调整后的圆角 */
    height: 280px; /* 新高度 */
    /* margin-bottom: 25px; */ /* 新增：调整底部间距 */
    margin-bottom: 10px; /* 进一步调整：进阶LOGO往下一点 */
    /* margin-top: 0; */ /* 确保没有顶部外边距，间隙由基础LOGO控制 */
}

/* LOGO 发光效果 */
.dimension-level-logo.basic-glow {
    box-shadow: 0 0 8px 1px rgba(137, 207, 240, 0.6), inset 0 0 8px 2px rgba(173, 216, 230, 0.5); /* 再次调整外发光并保持内发光 */
    transform: scale(1.05); /* 轻微放大效果 */
}

.dimension-level-logo.advanced-glow {
    box-shadow: 0 0 8px 1px rgba(220, 220, 220, 0.6), inset 0 0 8px 2px rgba(255, 255, 255, 0.5); /* 再次调整外发光并保持内发光 */
    transform: scale(1.05); /* 轻微放大效果 */
}

/* --- 移除旧的维度卡片发光样式，使用新的统一样式 --- */

/* 新增：移除最右侧竖卡片 (分区指示器) 的外发光 */
#dimension-card-section_indicator.dimension-card {
    box-shadow: none;
    border-color: transparent;
}

/* 移除：用于卡片辉光渐隐的类 - 简化发光机制，避免与摘要更新产生时序冲突 */
/* .dimension-card.card-glow-fade-out {
    box-shadow: none !important;
    border-color: transparent !important;
} */

/* --- 结束新增 --- */ 



/* --- 翻牌器辉光样式：原始翻牌器和悬浮克隆体 --- */

/* 原始翻牌器发光样式 - 用于滚动过程中 */
/* 排列五 (paiwu) - 灰蓝色 - 强制覆盖发光效果，保持圆角 */
#flipboard-container.glow-flipboard-paiwu {
    border: 1px solid #58719B !important;
    box-shadow: 0 0 10px 3px rgba(88, 113, 155, 0.75),
                inset 0 0 6px 2px rgba(88, 113, 155, 0.55) !important;
    border-radius: 8px !important; /* 保持圆角 */
}

/* 七星彩 (qixingcai) - 蒂芙尼蓝 - 强制覆盖发光效果，保持圆角 */
#flipboard-container.glow-flipboard-qixingcai {
    border: 1px solid #81D8D0 !important;
    box-shadow: 0 0 10px 3px rgba(129, 216, 208, 0.75),
                inset 0 0 6px 2px rgba(129, 216, 208, 0.55) !important;
    border-radius: 8px !important; /* 保持圆角 */
}

/* 东方6+1 (dongfang) - 中国红 - 强制覆盖发光效果，保持圆角 */
#flipboard-container.glow-flipboard-dongfang {
    border: 1px solid #CC0000 !important;
    box-shadow: 0 0 10px 3px rgba(204, 0, 0, 0.75),
                inset 0 0 6px 2px rgba(204, 0, 0, 0.55) !important;
    border-radius: 8px !important; /* 保持圆角 */
}

/* 福彩3D (fc3d) - 发光白 - 强制覆盖发光效果，保持圆角 */
#flipboard-container.glow-flipboard-fc3d {
    border: 1px solid #C8E1FF !important;
    box-shadow: 0 0 10px 3px rgba(200, 225, 255, 0.75),
                inset 0 0 6px 2px rgba(200, 225, 255, 0.55) !important;
    border-radius: 8px !important; /* 保持圆角 */
}

/* 排列三 (pailiesan) - 酒绿 - 强制覆盖发光效果，保持圆角 */
#flipboard-container.glow-flipboard-pailiesan {
    border: 1px solid #99FF00 !important;
    box-shadow: 0 0 10px 3px rgba(153, 255, 0, 0.75),
                inset 0 0 6px 2px rgba(153, 255, 0, 0.55) !important;
    border-radius: 8px !important; /* 保持圆角 */
}

/* 天天彩选4 (ttcx4) - 暖杏 - 强制覆盖发光效果，保持圆角 */
#flipboard-container.glow-flipboard-ttcx4 {
    border: 1px solid #FEE5C8 !important;
    box-shadow: 0 0 10px 3px rgba(254, 229, 200, 0.75),
                inset 0 0 6px 2px rgba(254, 229, 200, 0.55) !important;
    border-radius: 8px !important; /* 保持圆角 */
}

/* 翻牌器克隆体发光样式已删除 - 保持最简化状态 */

/* --- 新增：等级指示区 (右侧长卡片) 辉光样式 --- */
#dimension-card-section_indicator {
    /* 确保辉光效果可以正确应用，如果卡片本身没有过渡，则添加 */
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* 排列五 (paiwu) - 灰蓝色 */
#dimension-card-section_indicator.glow-indicator-paiwu {
    border: 1px solid #58719B;
    box-shadow: 0 0 7px 2px rgba(88, 113, 155, 0.7), inset 0 0 5px 1px rgba(88, 113, 155, 0.5); /* Standardized shadow */
}

/* 七星彩 (qixingcai) - 蒂芙尼蓝 */
#dimension-card-section_indicator.glow-indicator-qixingcai {
    border: 1px solid #81D8D0;
    box-shadow: 0 0 7px 2px rgba(129, 216, 208, 0.7), inset 0 0 5px 1px rgba(129, 216, 208, 0.5); /* Standardized shadow */
}

/* 东方6+1 (dongfang) - 中国红 */
#dimension-card-section_indicator.glow-indicator-dongfang {
    border: 1px solid #CC0000;
    box-shadow: 0 0 7px 2px rgba(204, 0, 0, 0.7), inset 0 0 5px 1px rgba(204, 0, 0, 0.5); /* Standardized shadow */
}

/* 福彩3D (fc3d) - 发光白 */
#dimension-card-section_indicator.glow-indicator-fc3d {
    border: 1px solid #C8E1FF;
    box-shadow: 0 0 7px 2px rgba(200, 225, 255, 0.7), inset 0 0 5px 1px rgba(200, 225, 255, 0.5); /* Standardized shadow */
}

/* 排列三 (pailiesan) - 酒绿 */
#dimension-card-section_indicator.glow-indicator-pailiesan {
    border: 1px solid #99FF00;
    box-shadow: 0 0 7px 2px rgba(153, 255, 0, 0.7), inset 0 0 5px 1px rgba(153, 255, 0, 0.5); /* Standardized shadow */
}

/* 天天彩选4 (ttcx4) - 暖杏 */
#dimension-card-section_indicator.glow-indicator-ttcx4 {
    border: 1px solid #FEE5C8; /* 保持原有边框 */
    box-shadow: 0 0 7px 2px rgba(254, 229, 200, 0.7),
                inset 0 0 5px 1px rgba(254, 229, 200, 0.5); /* 修改：匹配侧边栏辉光 */
}
/* --- 结束等级指示区辉光样式 --- */ 

/* === 卡片悬停效果 === */
/* 修改：取消缓冲区，改为彩种发光效果 */
.entry-card,
.entry-card-top-aligned,
.entry-card-top-aligned-tall,
.entry-card-half,
.entry-card-tall-left,
.entry-card-tall {
    /* 移除缓冲区相关样式 */
    /* position: relative; */
    /* 添加发光效果过渡 */
    transition: all 0.3s ease;
}

/* 移除所有缓冲区相关样式 */
/* .entry-card::before,
.entry-card-top-aligned::before,
.entry-card-top-aligned-tall::before,
.entry-card-half::before,
.entry-card-tall-left::before,
.entry-card-tall::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    pointer-events: none;
    z-index: -1;
} */

/* 修改：取消通用阴影效果，改为彩种发光 */
.entry-card:hover,
.entry-card-top-aligned:hover,
.entry-card-top-aligned-tall:hover,
.entry-card-half:hover {
    /* 取消弹起效果：transform: translateY(-5px); */
    /* 取消通用阴影效果，让彩种发光生效 */
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; */
    transition: all 0.3s ease;
}

/* 左侧高卡片悬停效果 */
.entry-card-tall-left:hover {
    /* 取消弹起效果：transform: translateY(-5px); */
    /* 取消通用阴影效果，让彩种发光生效 */
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; */
    transition: all 0.3s ease;
}

/* 右侧高卡片悬停效果 - 但排除维度分层显示器 */
.entry-card-tall:hover:not(#dimension-card-section_indicator) {
    /* 取消弹起效果：transform: translateY(-5px); */
    /* 取消通用阴影效果，让彩种发光生效 */
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; */
    transition: all 0.3s ease;
}

/* 维度分层显示器悬停效果 - 取消跳动 */
#dimension-card-section_indicator:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* === 新增：第二屏维度卡片彩种发光效果 === */

/* 排列五主题发光效果 */
.dimension-card.card-lottery-paiwu {
    border: 1px solid #58719B !important;
    box-shadow: 0 0 5px 1px rgba(88, 113, 155, 0.6), inset 0 0 3px 1px rgba(88, 113, 155, 0.4) !important;
}

.dimension-card.card-lottery-paiwu:hover {
    border-color: rgba(88, 113, 155, 0.9);
    box-shadow: 0 0 8px 2px rgba(88, 113, 155, 0.7), inset 0 0 4px 1px rgba(88, 113, 155, 0.5) !important;
}

/* 七星彩主题发光效果 */
.dimension-card.card-lottery-qixingcai {
    border: 1px solid #81D8D0 !important;
    box-shadow: 0 0 5px 1px rgba(129, 216, 208, 0.6), inset 0 0 3px 1px rgba(129, 216, 208, 0.4) !important;
}

.dimension-card.card-lottery-qixingcai:hover {
    border-color: rgba(129, 216, 208, 0.9);
    box-shadow: 0 0 8px 2px rgba(129, 216, 208, 0.7), inset 0 0 4px 1px rgba(129, 216, 208, 0.5) !important;
}

/* 东方6+1主题发光效果 */
.dimension-card.card-lottery-dongfang {
    border: 1px solid #CC0000 !important;
    box-shadow: 0 0 5px 1px rgba(204, 0, 0, 0.6), inset 0 0 3px 1px rgba(204, 0, 0, 0.4) !important;
}

.dimension-card.card-lottery-dongfang:hover {
    border-color: rgba(204, 0, 0, 0.9);
    box-shadow: 0 0 8px 2px rgba(204, 0, 0, 0.7), inset 0 0 4px 1px rgba(204, 0, 0, 0.5) !important;
}

/* 福彩3D主题发光效果 */
.dimension-card.card-lottery-fc3d {
    border: 1px solid #C8E1FF !important;
    box-shadow: 0 0 5px 1px rgba(200, 225, 255, 0.6), inset 0 0 3px 1px rgba(200, 225, 255, 0.4) !important;
}

.dimension-card.card-lottery-fc3d:hover {
    border-color: rgba(200, 225, 255, 0.9);
    box-shadow: 0 0 8px 2px rgba(200, 225, 255, 0.7), inset 0 0 4px 1px rgba(200, 225, 255, 0.5) !important;
}

/* 排列三主题发光效果 */
.dimension-card.card-lottery-pailiesan {
    border: 1px solid #99FF00 !important;
    box-shadow: 0 0 5px 1px rgba(153, 255, 0, 0.6), inset 0 0 3px 1px rgba(153, 255, 0, 0.4) !important;
}

.dimension-card.card-lottery-pailiesan:hover {
    border-color: rgba(153, 255, 0, 0.9);
    box-shadow: 0 0 8px 2px rgba(153, 255, 0, 0.7), inset 0 0 4px 1px rgba(153, 255, 0, 0.5) !important;
}

/* 天天彩选4主题发光效果 */
.dimension-card.card-lottery-ttcx4 {
    border: 1px solid #FEE5C8 !important;
    box-shadow: 0 0 5px 1px rgba(254, 229, 200, 0.6), inset 0 0 3px 1px rgba(254, 229, 200, 0.4) !important;
}

.dimension-card.card-lottery-ttcx4:hover {
    border-color: rgba(254, 229, 200, 0.9);
    box-shadow: 0 0 8px 2px rgba(254, 229, 200, 0.7), inset 0 0 4px 1px rgba(254, 229, 200, 0.5) !important;
}

/* LOGO悬停联动效果通过JavaScript实现 */

/* LOGO悬停联动跳动效果类 - 取消跳动，只保持原有发光 */
.logo-hover-jump {
    /* 取消跳动效果：transform: translateY(-5px) !important; */
    transition: transform 0.3s ease !important;
} 

/* 翻牌器克隆体响应式配置已删除 - 保持最简状态 */