* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    padding: 20px;
    margin: 0;
}

h2 {
    font-size: 24px;
    color: #555;
    text-align: center;
    margin-bottom: 15px;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 默认桌面端一行显示 4 列 */
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px;
    overflow: visible; /* 确保阴影不被裁剪 */
}

.bet-box {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 左右和上方阴影 */
    position: relative; /* 让标签在框体内定位 */
    overflow: hidden; /* 确保图片边角跟随 .bet-box */
    padding: 0; /* 移除内边距，使内容贴合边界 */
    transition: box-shadow 0.2s; /* 只保留阴影的过渡 */
    margin-bottom: 20px; /* 增加底部边距以显示阴影 */
}

/* 添加一个新的样式，用于处理下方阴影 */
.bet-box:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加下方阴影 */
}

.bet-image {
    width: 100%;
    height: 120px; /* 控制图片高度 */
    object-fit: cover;
    display: block; /* 去掉图片底部的间隙 */
    margin-bottom: 10px; /* 确保与 Competición 之间有 A 距离 */
}

.match-info {
    font-size: 14px; /* 确保两行文字的字体大小一致 */
    font-weight: normal; /* 取消加粗效果 */
    color: #333;
    margin-bottom: 5px; /* 减少段落间距 */
    text-align: left; /* 左对齐 */
    padding-left: 15px; /* 距离左边有一定间距 */
    line-height: 1.2; /* 减小行间距 */
}

/* 确保对 Event 的样式一致 */
.match-info p {
    font-size: 14px; /* 确保所有行的字体大小一致 */
    font-weight: normal; /* 设置为正常字体 */
    color: #333; /* 字体颜色保持一致 */
    margin-bottom: 0px; /* 调整底部间距，保持一致 */
    margin: 0; /* 去掉段落的默认上下间距 */
}

.highlight {
    color: #ff5733; /* 突出颜色 */
    font-weight: bold;
    font-size: 14px; /* 确保关键字与内容字体一致 */
}

.prediction {
    font-size: 14px; /* 增大字体，使其更加突出 */
    color: #fb8c00;
    text-align: left; /* 左对齐 */
    margin: 5px 15px; /* 增加上下边距，并保持左右间距 */
    line-height: 1.2; /* 减小行间距 */
    margin-top: 0px; /* 根据需要调整与上方内容的间距 */
}

.event-date {
    text-align: left; /* 左对齐 */
    color: #333; /* 字体颜色 */
    font-size: 14px; /* 字体大小 */
    margin-top: 5px; /* 上方间距 */
    margin-bottom: 5px; /* 设置底部间距，保持与按钮的间隔 */
}

.odds-stake {
    display: flex;
    justify-content: space-between;
    margin-top: 15px; /* 与上方内容保持间距 */
    width: calc(100% - 20px); /* 设置宽度为100%减去一定的边距 */
    margin-left: 10px; /* 确保与左边有一定间距 */
    margin-right: 10px; /* 确保与右边有一定间距 */
}

.odds-box {
    flex: 1; /* 平分空间 */
    background: linear-gradient(135deg, #4fc3f7, #29b6f6); /* 固定颜色 */
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    flex: 1; /* 每个框均分剩余空间 */
    margin: 0; /* 移除外边距，避免偏移 */
    margin-right: 10px; /* 仅在左侧框与右侧框之间添加间距 */
}

.stake-box {
    flex: 1; /* 平分空间 */
    background-color: #ff9800; /* 橙色背景 */
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    flex: 1; /* 每个框均分剩余空间 */
    margin: 0; /* 移除外边距，避免偏移 */
    margin-left: 10px; /* 仅在左侧框与右侧框之间添加间距 */
}

/* 确保鼠标悬停时不改变背景颜色 */
.odds-box:hover,.stake-box:hover {
    cursor: default; /* 鼠标不变为手形 */
}

.bet-button {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: white;
    border: none;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: calc(100% - 20px); /* 按钮宽度减去左右边距 */
    margin: 10px auto; /* 上下边距为10px，左右自动居中 */
    display: block; /* 使按钮成为块级元素 */
    max-width: calc(100% - 20px); /* 设置最大宽度 */
}

.bet-button:hover {
    background: linear-gradient(135deg, #388e3c, #43a047);
    /* 去掉其他样式变化，保持原样 */
}

.event-date, .status {
    text-align: center;
    color: #777;
    font-size: 14px;
    margin-top: 10px;
}

.bet-box.pending {
    border-left: 5px solid #4fc3f7;
}

.bet-box.completed {
    border-left: 5px solid #81c784;
}

/* 针对移动端的样式设置 */
@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column; /* 垂直排列每个 .bet-box */
        align-items: center; /* 居中显示每个 .bet-box */
    }

    .bet-box {
        width: 100%; /* 让 .bet-box 占据一行的宽度 */
        max-width: 400px; /* 可选：限制最大宽度 */
        margin-bottom: 20px; /* 设置底部间距，方便区分每个框 */
    }
}


.status-label {
    position: absolute;
    top: 20px; /* 标签距顶部的偏移量 */
    left: -40px; /* 调整左侧偏移，使其位于左上角 */
    background-color: rgba(76, 175, 80, 0.85); /* 绿色背景 */
    color: white;
    padding: 10px 60px; /* 增加背景框宽度 */
    font-weight: bold;
    font-size: 18px;
    transform: rotate(-45deg); /* 旋转 45 度 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2; /* 确保标签位于图片上方 */
    text-align: center;
}

/* LOST 标签的颜色调整为红色 */
.bet-box.completed .status-label.lost {
    background-color: rgba(244, 67, 54, 0.85); /* 红色背景 */
}

/* 调整文字位置 */
.status-label span {
    display: inline-block;
    transform: translateX(10px); /* 向右偏移，使文本居中 */
}