.game-type{
    font-size: 24px;
    font-weight: 500;
    color: #66ccff;
    margin-left: 10px;
}

.wrap{
    display: flex;
    gap: 6px;
    width: 100%;
}

/* 气泡外层容器，必须relative，作为气泡定位锚点 */
.tip-wrap {
    position: relative;
}
/* 气泡盒子，默认隐藏 */
.tip-wrap::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: calc(100% + 8px); /* 在文字下方8px弹出 */
    z-index: 999;
    display: none;

    /* 气泡自定义样式，可随意修改 */
    background-color: #ffffff;
    color: #66ccff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    max-width: 320px; /* 气泡最大宽度，长文本自动换行 */
    white-space: pre-wrap;
    word-break: break-word;
}

/* 鼠标悬浮显示气泡 */
.tip-wrap:hover::after {
    display: block;
}

/* 单个卡片块 */
.box-item{
    flex: 1;
    min-height: 130px;
    margin: 3px 0;
    border: 3px solid #66ccff;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    /* padding：上下12px，左右12px；想要标题贴最顶 → 把上内边距改成 0，左右下保留 */
    padding: 0 12px 12px 12px;
    gap: 12px;
    box-sizing: border-box;
}

/* 图片区域：原来padding顶部变成0，图片会跟着往上，给图片补上上边距，让图片不和边框贴顶 */
.box-img{
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-top: 12px;
}
.box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填满盒子，不变形 */
}

/* 中间文本容器 */
.box-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0;
}
/* 标题最多1行，超出省略 */
.box-title {
    font-size: 28px;
    color: #66ccff;
    margin-top: 0;
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 分割线，只在文本区域内 */
.divider{
    width: 100%;
    height: 1px;
    background: #66ccff;
}
/* 简介最多2行，超出省略 */
.box-desc {
    font-size: 20px;
    color: #66ccff;
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 按钮组，同样补上上边距，和图片对齐 */
.box-buttons{
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 12px;
}
.box-btn{
    text-decoration: none;  /* 清除a标签下划线 */
    display: block;           /* a标签继承按钮尺寸 */
    border: none;
    border-radius: 6px;
    background-color: #66ccff;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}
/* 鼠标悬浮效果 */
.box-btn:hover{
    background-color: #0080ff;
}