﻿/* 整体网格 */
#sl_lobby {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 22px;
}
    /* 卡片容器（就是你现有的 <a class="content-game">） */
    #sl_lobby .content-game {
        display: block;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
        text-decoration: none;
        color: inherit;
        transition: transform .2s ease, box-shadow .2s ease;
    }

        #sl_lobby .content-game:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0,0,0,.12);
        }
        /* 上下两行标题：来自 <a> 上的 data-name 属性 */
        #sl_lobby .content-game::before,
        #sl_lobby .content-game::after {
            content: attr(data-name);
            display: block;
            text-align: center;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #sl_lobby .content-game::before {
            padding: 10px 10px;
            font-weight: 700;
            font-size: 13px;
            color: #ff8a00;
            background: linear-gradient(180deg, rgba(255,167,38,.15), transparent);
        }

        #sl_lobby .content-game::after {
            padding: 12px 12px 14px;
            font-weight: 700;
            font-size: 14px;
            color: #1f2a44;
        }
        /* 图片区域：等宽等高更美观 */
        #sl_lobby .content-game img {
            display: block;
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
    /* 隐藏旧的文字块，避免重复（你原来的 .game-text） */
    #sl_lobby .game-text {
        display: none !important;
    }
