/**
 * 首页：全通栏 Hero（轮播 + 左对齐标题） / 热门游戏网格 / 已开新服 + 新服预告两栏
 *
 * 相对旧版的两个改动：
 *   1. Hero 从裸轮播改为「图 + 遮罩 + 左对齐文案」，信息直接压在图上；
 *   2. 开服区从右侧栏 + Tab 切换改为全宽左右两栏并排 —— 能同时看见就别藏起来。
 */

/* ===== Hero / 轮播 ===== */
.banner {
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
    background: #0b0b0d;
}
.banner-viewport { height: 100%; }
.banner-track { display: flex; height: 100%; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.banner-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; }
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: .92;
}

/* 左侧深色渐变，保证文字对比度 */
.hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .05) 75%);
    pointer-events: none;
}
.hero-tx {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 64px;
    pointer-events: none;
}
.hero-tx .container { pointer-events: auto; }
.hero-tx .eyebrow { color: #f5d98a; }
.hero-tx .h-display { color: #fff; margin: 10px 0 14px; max-width: 640px; }
.hero-tx .lead { color: rgba(255, 255, 255, .82); max-width: 520px; }
.hero-actions { display: flex; gap: 12px; margin-top: 24px; }

/* 翻页按钮：苹果风圆形半透明 */
.banner-prev, .banner-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color .2s;
    z-index: 5;
}
.banner-prev:hover, .banner-next:hover { background: rgba(255, 255, 255, .34); }
.banner-prev { left: 24px; }
.banner-next { right: 24px; }
.banner-prev::before, .banner-next::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
}
.banner-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.banner-next::before { transform: translate(-70%, -50%) rotate(-135deg); }

.banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.banner-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: .25s;
}
.banner-dot.is-active { width: 22px; border-radius: 4px; background: #fff; }

/* ===== 热门游戏 ===== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.game-card {
    background: var(--surface);
    border-radius: var(--r-l);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
}
.game-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }

.game-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #e9e9ee, #f7f7f9);
}
.game-cover > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.game-card:hover .game-cover > img:first-child { transform: scale(1.07); }

.game-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 52px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.game-type {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--r-p);
    background: rgba(255, 255, 255, .9);
    color: var(--t1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.game-logo + .game-type { top: auto; bottom: 10px; }

.game-meta { padding: 13px 15px 15px; }
.game-name {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-sub { font-size: 12px; color: var(--t3); margin-top: 3px; }
.game-go {
    margin-top: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
}

/* ===== 开服两栏 ===== */
.srv-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.srv-box {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-l);
    padding: 22px 24px 8px;
}
.srv-box h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.srv-box h3 .cnt {
    font-size: 12px;
    font-weight: 500;
    color: var(--t3);
    background: var(--bg-2);
    padding: 2px 8px;
    border-radius: var(--r-p);
}

.srow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
}
.srow:last-child { border-bottom: 0; }
.srow .gm {
    width: 104px;
    flex: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srow .sn {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srow .tm {
    flex: none;
    font-size: 12px;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}

.badge {
    flex: none;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--r-p);
}
.b-new { background: #e8f7ee; color: #1d7a3d; }
.b-hot { background: #fdeceb; color: #a32d2d; }
.b-soon { background: var(--bg-2); color: var(--t2); }

/* ===== 窄屏 ===== */
@media (max-width: 1100px) {
    .game-grid { grid-template-columns: repeat(3, 1fr); }
    .srv-2col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .banner { height: 320px; }
    .game-grid { grid-template-columns: repeat(2, 1fr); }
}