/* Tailwind CSS 配置 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 网站背景图设置 */
body {
    background-image: url('bc.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    /* 导航按钮样式 */
    /* 只在电脑端显示导航栏下方的横线 */
    @media (min-width: 640px) {
        /* #nav-container > div::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 15rem; 
            right: 55rem;
            height: 1px;
            background-color: white;
        } */
    }
    
    .nav-button {
        background: transparent;
        border: 1px solid white; /* 添加与下拉框一致的边框 */
        color: #d1d5db;
        position: relative;
        cursor: pointer;
        transition: color 0.2s ease;
    }
    .nav-button:hover {
        color: #ffffff;
    }
    .nav-button.active {
        color: #ffffff;
    }
    .nav-button.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 4%;
        width: 90%;
        height: 3px;
        background-color: #FFD700;
        border-radius: 3px 3px 0 0;
    }
    .team-logo {
        width: 63px;
        height: 37px;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 18px;
        border: 2px solid white;
        flex-shrink: 0;
        margin-bottom: 4px;
    }
    
    /* 十六进八 - 最小的队徽和队名 */
    .stage-round16 .team-logo {
        width: 53px;
        height: 31px;
        font-size: 14px;
    }
    .stage-round16 .font-medium {
        font-size: 12px;
    }
    
    /* 八进四 - 稍微大一点的队徽和队名 */
    .stage-quarterfinals .team-logo {
        width: 57px;
        height: 33px;
        font-size: 16px;
    }
    .stage-quarterfinals .font-medium {
        font-size: 14px;
    }
    
    /* 半决赛 - 再大一点的队徽和队名 */
    .stage-semifinals .team-logo {
        width: 68px;
        height: 39px;
        font-size: 16px;
    }
    .stage-semifinals .font-medium {
        font-size: 16px;
    }
    
    /* 决赛 - 最大的队徽和队名 */
    .stage-finals .team-logo {
        width: 81px;
        height: 48px;
        font-size: 24px;
    }
    .stage-finals .font-medium {
        font-size: 20px;
    }
    
    /* 决赛卡片队名特殊处理 - 确保始终水平显示且不换行 */
    .final-team-card .font-medium {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
    
    /* 手机端决赛队名特殊处理 */
    @media (max-width: 768px) {
        .final-team-card .font-medium {
            font-size: 14px !important;
            width: auto !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .final-team-card .team-info {
            display: flex !important;
            align-items: center;
            flex-shrink: 0;
        }
        
        /* 调整左侧和右侧team-info的justify-content */
        .final-team-left .team-info {
            justify-content: flex-end !important;
        }
        
        .final-team-right .team-info {
            justify-content: flex-start !important;
        }
    }
    .team-card {
        background-color: transparent;
        border-radius: 6px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 90px; /* 使用最小高度，允许自适应 */
        width: 100%;
        transition: transform 0.2s ease;
        font-size: 10px;
        box-sizing: border-box;
    }
    .team-card span {
        display: block;
        line-height: 1.2;
        width: 100%;
        /* 允许队名换行显示，不隐藏文本 */
        white-space: normal;
        word-break: break-word;
    }
    
    /* 下半区球队卡片特殊样式 - 使logo和队名向下移动 */
    #semifinals-bottom-teams .team-card,
    #quarterfinals-bottom-teams .team-card,
    #bottom-half-teams .team-card {
        justify-content: flex-end;
        padding-top: 16px; /* 增加顶部内边距，使内容向下移动 */
    }
    
    /* 确保下半区队名到卡片底部边框的距离与上半区logo到顶部边框的距离一致 */
    #semifinals-bottom-teams .team-card .font-medium,
    #quarterfinals-bottom-teams .team-card .font-medium,
    #bottom-half-teams .team-card .font-medium {
        margin-bottom: 8px; /* 增加队名底部外边距 */
    }

/* 导航容器样式 */
#nav-container {
    position: relative;
    z-index: 10;
    margin-bottom: 2rem;
}
    
    /* 媒体查询 - 手机端优化 */
@media (max-width: 768px) {
    /* 优化整体布局 - 完全禁用水平滚动 */
    body {
        overflow-x: hidden !important;
        padding: 4px;
        position: relative;
    }
    
    html {
        overflow-x: hidden !important;
        position: relative;
    }
    
    /* 确保容器完全适应手机宽度 */
    .max-w-7xl {
        min-width: auto !important;
        max-width: 100% !important;
        padding: 0;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* 为手机端优化晋级图布局 */
    .relative {
        width: 100% !important;
        overflow: hidden !important;
        position: relative;
        box-sizing: border-box;
    }
    
    /* 确保所有轮次容器都不超出屏幕宽度并正确定位 */
    #round16,
    #quarterfinals,
    #semifinals,
    #finals {
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 15px;
        padding: 5px 0;
    }
    
    /* 修复手机端晋级路线图的连接显示问题 */
    #connections-svg {
        z-index: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 确保球队卡片显示在连接线之上 */
    .team-card {
        position: relative;
        z-index: 1 !important;
    }
    
    /* 修改区块间距，增加连接线路的可见空间 */
    .mb-2 {
        margin-bottom: 15px; /* 增加间距，确保连接线路有足够空间显示 */
    }
    
    /* 修改网格布局 - 调整为更适合手机屏幕的列数 */
    #top-half-teams,
    #bottom-half-teams {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
    }
    
    #quarterfinals-top-teams,
    #quarterfinals-bottom-teams {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    
    #semifinals-top-teams,
    #semifinals-bottom-teams {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    
    #finals-teams {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 优化队徽显示 */
    .team-logo {
        width: 24px;
        height: 14px;
        font-size: 8px;
        border-width: 1px;
        margin-bottom: 2px;
    }
    
    /* 十六进八 - 手机端队徽 */
    .stage-round16 .team-logo {
        width: 30px;
        height: 18px;
        font-size: 9px;
    }
    
    /* 十六进八 - 手机端队名 */
    .stage-round16 .team-card .font-medium {
        font-size: 6px !important;
    }
    
    /* 八进四 - 手机端队徽 */
    .stage-quarterfinals .team-logo {
        width: 36px;
        height: 22px;
        font-size: 11px;
    }
    
    /* 八进四 - 手机端队名 */
    .stage-quarterfinals .team-card .font-medium {
        font-size: 8px !important;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    
    /* 增加更具体的选择器，确保样式生效 */
    #quarterfinals-top-teams .team-card .font-medium,
    #quarterfinals-bottom-teams .team-card .font-medium {
        font-size: 8px !important;
        line-height: 1.2;
    }
    
    /* 上半区8进4卡片特殊样式 - 增加底部间距 */
    #quarterfinals-top-teams .team-card {
        margin-bottom: 5px;
    }
    
    /* 半决赛 - 手机端队徽 */
    .stage-semifinals .team-logo {
        width: 42px;
        height: 26px;
        font-size: 13px;
    }
    
    /* 半决赛 - 手机端队名 */
    .stage-semifinals .team-card .font-medium {
        font-size: 10px !important;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    
    /* 增加更具体的选择器，确保样式生效 */
    #semifinals-top-teams .team-card .font-medium,
    #semifinals-bottom-teams .team-card .font-medium {
        font-size: 10px !important;
        line-height: 1.2;
    }
    
    /* 决赛 - 手机端队徽 */
    .stage-finals .team-logo {
        width: 50px;
        height: 32px;
        font-size: 12px;
    }
    
    /* 决赛 - 手机端队名 */
    .stage-finals .team-card .font-medium {
        font-size: 24px !important;
    }
    
    /* 优化队名显示 */
    .team-card .font-medium {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 6px;
        line-height: 1.0;
        margin-bottom: 2px;
    }
    
    /* 需要两行显示的队名会通过JavaScript动态添加height类 */
    .team-card .font-medium.two-lines {
        min-height: 1.5em;
    }
    
    /* 优化球队卡片内边距和最小高度 */
    .team-card {
        padding: 3px;
        min-height: 50px;
        font-size: 6px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    
    /* 优化下半区球队卡片特殊样式 */
    #semifinals-bottom-teams .team-card,
    #quarterfinals-bottom-teams .team-card,
    #bottom-half-teams .team-card {
        padding-top: 6px; /* 增加顶部内边距，使内容向下移动 */
    }
    
    /* 优化决赛卡片布局 */
    .final-team-card {
        width: 80%;
        margin: 0 auto;
        min-height: 80px; /* 增加决赛卡片的最小高度 */
    }
    
    /* 增加决赛整体容器的高度 */
    #finals-teams {
        min-height: 100px;
    }
    
    .final-team-left .team-info,
    .final-team-right .team-info {
        margin: 0 4px;
    }
    
    
    .final-team-card .team-info .font-medium {
        font-size: 14px !important; /* 放大字体 */
        display: block !important;
        margin-right: 8px; /* 队名和比分之间的间距 */
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important; /* 允许内容可见 */
        text-overflow: unset !important; /* 移除省略号 */
        white-space: normal !important; /* 允许自动换行 */
        word-break: break-word !important; /* 允许单词内换行 */
        line-height: 1.2;
        max-width: 200%; /* 限制最大宽度以促进换行 */
    }
    
    /* 为移动端禁用所有元素的水平滚动 */
    @media (max-width: 768px) {
        * {
            box-sizing: border-box;
            max-width: 100% !important;
        }
    }
    
    /* 电脑端正常设置，不限制最大宽度 */
    @media (min-width: 769px) {
        * {
            box-sizing: border-box;
        }
    }
    
    /* 为连接线路添加z-index，确保它们在卡片下方显示 */
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 0;
    }
    
    /* 确保卡片在连接线路上方 */
    .team-card {
        position: relative;
        z-index: 1;
    }
}
    .team-card .font-medium {
        margin-bottom: 2px;
    }
    /* 移除hover效果 */
    
    /* 比分高亮样式 */
    .score-highlight {
        color: #FFD700; /* 金色高亮 */
        font-weight: bold;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    }
    .final-team-card {
        width: 50%;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    
    /* 左侧决赛卡片布局 - logo右对齐，队名在左侧 */
    .final-team-left {
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .final-team-left .team-info {
        margin-right: 10px;
        text-align: right;
    }
    
    /* 右侧决赛卡片布局 - logo左对齐，队名在右侧 */
    .final-team-right {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .final-team-right .team-info {
        margin-left: 10px;
        text-align: left;
    }

    
}