/* =========================================

   首页样式 - 仿3306.net 暗黑风格

   宽度: 1406px

   ========================================= */



/* ===== 1. 全屏轮播 + 广告区 ===== */

.hero-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    z-index: 1;

}



/* 全屏轮播容器 - 无缝横向滚动 */

.hero-fullscreen-slider {

    position: relative;

    width: 100%;

    height: 440px;

    overflow: hidden;

    background: #0b0d17;

}



/* 无缝滚动轨道 */

.hero-scroll-track {

    display: flex;

    height: 100%;

    animation: heroScrollLeft 40s linear infinite;

    will-change: transform;

}



/* 轮播始终滚动，鼠标悬停不暂停 */



@keyframes heroScrollLeft {

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

}



/* 每张滚动图 - 宽度等于视口 */

.hero-scroll-item {

    flex: 0 0 100vw;

    width: 100vw;

    height: 100%;

    position: relative;

    overflow: hidden;

}



.hero-scroll-item-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



/* 轮播图片暗色遮罩 */

.hero-scroll-item-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.5) 100%);

}



/* 轮播文字遮罩 */

.hero-banner-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    z-index: 20;

    pointer-events: none;

}



.hero-text-line1 {

    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;

    font-size: 30px;

    font-weight: bold;

    color: #ffffff;

    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);

    margin-bottom: 12px;

    white-space: nowrap;

}



.hero-text-line2 {

    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;

    font-size: 24px;

    font-weight: normal;

    color: #ffffff;

    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);

    white-space: nowrap;

}

    pointer-events: none;




/* 遮罩+文字层 */

.hero-scroll-item-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(11,13,23,0.85) 0%, rgba(11,13,23,0.3) 50%, rgba(11,13,23,0.6) 100%);

    display: flex;

    align-items: center;

    z-index: 2;

}



.hero-scroll-item-content {

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 60px;

    color: #fff;

}



.hero-scroll-item-content h2 {

    font-size: 36px;

    font-weight: 700;

    margin-bottom: 12px;

    text-shadow: 0 2px 12px rgba(0,0,0,0.5);

    letter-spacing: 1px;

}



.hero-scroll-item-content p {

    font-size: 16px;

    color: rgba(255,255,255,0.7);

    margin-bottom: 24px;

    max-width: 500px;

}



.hero-scroll-item-content .hero-slide-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 28px;

    background: var(--gradient-primary);

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    border-radius: var(--radius);

    transition: all 0.3s;

    text-decoration: none;

}



.hero-scroll-item-content .hero-slide-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(108,92,231,0.4);

    color: #fff;

}



/* 隐藏旧轮播控件（无缝滚动模式下不需要） */

.hero-slider-dots,

.hero-nav-btn { display: none; }



/* 导航箭头（全屏版居中） */

.hero-nav-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(0,0,0,0.4);

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s;

    backdrop-filter: blur(4px);

}



.hero-nav-btn:hover {

    background: var(--primary);

    border-color: var(--primary);

    box-shadow: 0 4px 16px rgba(108,92,231,0.4);

}



.hero-nav-btn.prev { left: 30px; }

.hero-nav-btn.next { right: 30px; }



/* 右侧广告位（轮播下方，横排5个） - 一半压在轮播上 */

.hero-ads-section {

    padding: 0 0 20px;

    background: transparent;

    position: relative;

    z-index: 10;

    margin-top: -60px;

}



.hero-ads-container {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.hero-ad-card {

    border-radius: var(--radius-md);

    overflow: hidden;

    cursor: pointer;

    position: relative;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;

    box-shadow: 0 4px 16px rgba(0,0,0,0.15);

}



.hero-ad-card:hover {

    transform: translateY(6px);

    box-shadow: 0 12px 32px rgba(0,0,0,0.4);

}



.hero-ad-card img {

    width: 100%;

    height: auto;

    display: block;

}



.hero-ad-card .ad-mask {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.1);

    transition: background 0.3s;

}



.hero-ad-card:hover .ad-mask {

    background: rgba(0,0,0,0.02);

}



/* ===== 2. 快捷入口 4列 ===== */

.home-nav-section {
    padding: 12px 0;
    background: transparent;
}



.home-nav-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.home-nav-card {

    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.06);

    border-radius: var(--radius-md);

    padding: 14px 12px;

    transition: all 0.3s;

}



.home-nav-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 4px 16px rgba(0,0,0,0.08);

    border-color: transparent;

}



.home-nav-card-title {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 8px;

}



.home-nav-card-title h3 {

    font-size: 14px;

    font-weight: 600;

    color: #1a1a2e;

    display: flex;

    align-items: center;

    gap: 6px;

}



.home-nav-card-title h3 i {

    color: var(--primary-light);

    font-size: 13px;

}



/* 紧凑图标网格 - 每个卡片一排4个 */

.nav-icon-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 4px;

}



.nav-icon-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 8px 4px;

    border-radius: var(--radius);

    text-decoration: none;

    transition: all 0.2s;

}



.nav-icon-item:hover {

    background: rgba(108,92,231,0.06);

    transform: translateY(-2px);

}



.nav-icon-emoji {

    width: 32px;

    height: 32px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    transition: transform 0.2s;

}



.nav-icon-item:hover .nav-icon-emoji {

    transform: scale(1.1);

}



.nav-icon-item span:last-child {

    font-size: 11px;

    color: #4a4a5a;

    white-space: nowrap;

}



.nav-icon-item:hover span:last-child {

    color: var(--primary);

}



/* ===== 3. 最新发布区 ===== */

.latest-section {
    padding: 10px 0;
    background: transparent;

}


.latest-container {

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.section-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 20px;

}



.section-header .section-tag {

    display: inline-flex;

    align-items: center;

    padding: 4px 12px;

    background: var(--gradient-primary);

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    color: #fff;

    letter-spacing: 1px;

}



.section-header h3 {

    font-size: 18px;

    font-weight: 600;

    color: #1a1a2e;

}



.section-header h3 strong {

    color: var(--accent);

    font-weight: 700;

}



.section-header p {

    color: #6e7094;

    font-size: 13px;

}



/* 一行显示两个标题 */

.section-header-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

    gap: 20px;

}

.section-header-row .section-header-item {

    display: flex;

    flex: 1;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

}

.section-header-row .section-header-item h3 {

    font-size: 18px;

    font-weight: 600;

    color: #1a1a2e;

    margin: 0;

}

.section-header-row .section-header-item p {

    color: #6e7094;

    font-size: 13px;

    margin: 0;

}



.section-tabs {

    display: flex;

    gap: 6px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}



.section-tab {

    padding: 6px 16px;

    border-radius: 20px;

    font-size: 13px;

    color: var(--text-muted);

    background: rgba(0,0,0,0.03);

    border: 1px solid var(--border);

    cursor: pointer;

    transition: all 0.2s;

}



.section-tab:hover, .section-tab.active {

    border-color: var(--primary);

    color: var(--accent);

    background: rgba(108,92,231,0.1);

}



/* 游戏卡片 - 一排2个网格 */

.game-grid-2col {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.game-list-item {

    display: flex;

    gap: 18px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all 0.3s;

    opacity: 0;

    transform: translateY(20px);

    animation: fadeInUp 0.5s ease forwards;

}



.game-list-item:nth-child(1) { animation-delay: 0.05s; }

.game-list-item:nth-child(2) { animation-delay: 0.1s; }

.game-list-item:nth-child(3) { animation-delay: 0.15s; }

.game-list-item:nth-child(4) { animation-delay: 0.2s; }

.game-list-item:nth-child(5) { animation-delay: 0.25s; }

.game-list-item:nth-child(6) { animation-delay: 0.3s; }

.game-list-item:nth-child(7) { animation-delay: 0.35s; }

.game-list-item:nth-child(8) { animation-delay: 0.4s; }

.game-list-item:nth-child(9) { animation-delay: 0.45s; }

.game-list-item:nth-child(10) { animation-delay: 0.5s; }



@keyframes fadeInUp {

    to { opacity: 1; transform: translateY(0); }

}



.game-list-item:hover {

    border-color: rgba(108, 92, 231, 0.5);

    transform: translateY(-2px);

    box-shadow: 0 0 20px rgba(108, 92, 231, 0.15), 0 8px 24px rgba(0,0,0,0.08);

}



.game-list-cover {

    position: relative;

    width: 220px;

    height: 138px;

    border-radius: var(--radius);

    overflow: hidden;

    flex-shrink: 0;

    background: #f0f1f3;

}



.game-list-cover img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.game-list-item:hover .game-list-cover img {

    transform: scale(1.05);

}



/* 列表卡片播放按钮 — 白色+光环扩散 */

.game-list-cover .card-play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.5);

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    color: #1a1a2e;

    font-size: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 4;

    opacity: 0;

    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    pointer-events: none;

    padding-left: 2px;

}



.game-list-item:hover .game-list-cover .card-play-btn {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

}



.game-list-badges {

    position: absolute;

    top: 8px;

    left: 8px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    z-index: 2;

}



.game-badge {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.5;

}



.game-badge.vip {

    background: var(--gradient-warning);

    color: #fff;

}



.game-badge.free {

    background: rgba(46,213,115,0.85);

    color: #fff;

}



.game-list-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.game-list-category {

    font-size: 12px;

    color: var(--primary);

    margin-bottom: 6px;

}



.game-list-title {

    font-size: 16px;

    font-weight: 600;

    color: #1a1a2e;

    margin-bottom: 6px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.game-list-title a {

    color: #1a1a2e;

    transition: color 0.2s;

}



.game-list-title a:hover { color: var(--accent); }



.game-list-desc {

    font-size: 13px;

    color: #6e7094;

    line-height: 1.5;

    margin-bottom: 8px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.game-list-meta {

    display: flex;

    gap: 16px;

    font-size: 12px;

    color: #999;

}



.game-list-meta span {

    display: flex;

    align-items: center;

    gap: 4px;

}



/* ===== 3a. 网单游戏区 ===== */

.wdyx-section {
    padding: 10px 0;
    background: transparent;
}



.wdyx-container {

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.wdyx-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 24px;

    position: relative;

}



.wdyx-header .section-tag {

    display: inline-flex;

    align-items: center;

    padding: 4px 12px;

    background: linear-gradient(135deg, var(--danger), var(--warning));

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    color: #fff;

    letter-spacing: 1px;

}



.wdyx-header h3 {

    font-size: 18px;

    font-weight: 600;

    color: #1a1a2e;

}



.wdyx-header h3 strong {

    color: var(--danger);

    font-weight: 700;

}



.wdyx-header p {

    font-size: 13px;

    color: #6e7094;

}



.wdyx-header > a {

    position: absolute;

    right: 0;

    margin-left: auto;

    font-size: 13px;

    color: #6e7094;

}



.wdyx-header > a:hover { color: var(--accent); }



.wdyx-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

}



.wdyx-card {

    display: block;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: var(--radius-md);

    overflow: hidden;

    cursor: pointer;

    transition: all 0.3s;

    opacity: 0;

    transform: translateY(20px);

    animation: fadeInUp 0.5s ease forwards;

    text-decoration: none;

}



.wdyx-card:hover {

    border-color: rgba(108, 92, 231, 0.5);

    transform: translateY(-6px);

    box-shadow: 0 0 20px rgba(108, 92, 231, 0.15), 0 12px 32px rgba(0,0,0,0.1);

}



.wdyx-card-cover {

    position: relative;

    width: 100%;

    aspect-ratio: 16/10;

    overflow: hidden;

    background: #f0f1f3;

    transition: transform 0.3s;

}



.wdyx-card:hover .wdyx-card-cover {

    transform: translateY(-4px);

}



.wdyx-card-cover img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s;

}



.wdyx-card:hover .wdyx-card-cover img {

    transform: scale(1.08);

}



/* 网单卡片播放按钮 — 白色+光环扩散 */

.wdyx-card-cover .card-play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.5);

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    color: #1a1a2e;

    font-size: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 4;

    opacity: 0;

    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    pointer-events: none;

    padding-left: 2px;

}



.wdyx-card:hover .wdyx-card-cover .card-play-btn {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

}



/* 播放按钮光环扩散 — 多环循环 */

.card-play-btn::before,

.card-play-btn::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.6);

    transform: translate(-50%, -50%) scale(1);

    opacity: 0;

    pointer-events: none;

}



.card-play-btn::before {

    animation: ringPulse1 2s ease-out infinite;

}



.card-play-btn::after {

    animation: ringPulse2 2s ease-out 0.6s infinite;

}



@keyframes ringPulse1 {

    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; border-width: 2px; }

    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; border-width: 0.5px; }

}



@keyframes ringPulse2 {

    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.5; border-width: 1.5px; }

    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; border-width: 0.5px; }

}



.wdyx-card-empty .wdyx-card-cover {

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-dim);

    font-size: 32px;

}



.wdyx-card-info {

    padding: 14px 16px;

}



.wdyx-card-title {

    font-size: 14px;

    font-weight: 600;

    color: #1a1a2e;

    margin-bottom: 6px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.wdyx-card-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    color: #6e7094;

}



.wdyx-card-status {

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



/* ===== 4. 3A大作 + 推荐区 ===== */

.featured-section {

    padding: 10px 0;

    background: #f0f1f3;

    max-width: 1406px;

    margin: 0 auto;

    border-radius: var(--radius-md);

}



.featured-container {

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.featured-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 20px;

    position: relative;

}



.featured-header .section-tag {

    display: inline-flex;

    align-items: center;

    padding: 4px 12px;

    background: linear-gradient(135deg, #ff4757, #ff6b81);

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    color: #fff;

    letter-spacing: 1px;

}



.featured-header h3 {

    font-size: 18px;

    font-weight: 600;

    color: #1a1a2e;

}



.featured-header h3 strong {

    color: #ff4757;

    font-weight: 700;

}



.featured-header p {

    color: #6e7094;

    font-size: 13px;

}



.featured-header a {

    position: absolute;

    right: 0;

    font-size: 13px;

    color: #6e7094;

}



.featured-header a:hover { color: var(--accent); }



.featured-grid {

    display: grid;

    grid-template-columns: 840px 1fr;

    gap: 16px;

    align-items: stretch;

}



.featured-item {

    position: relative;

    border-radius: var(--radius-md);

    overflow: hidden;

    cursor: pointer;

    background: #1a1a2e;

    transition: all 0.3s;

}



/* 左侧主图：跟随grid均分 */

.featured-item:first-child {

    aspect-ratio: auto;

    height: 100%;

    min-height: 290px;

}



/* 右侧容器：2列x2行 */

.featured-right {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: repeat(2, 1fr);

    gap: 16px;

    align-self: stretch;

}



/* 右侧小图：跟随grid行均分 */

.featured-right .featured-item {

    height: 100%;

    min-height: 0;

    aspect-ratio: unset;

}



.featured-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 0 20px rgba(108, 92, 231, 0.2), 0 12px 32px rgba(0,0,0,0.1);

}



.featured-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.featured-item:hover img { transform: scale(1.05); }



/* 3A左侧标题链接 */

.featured-title-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



/* 视频播放器遮罩 */

.video-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.95);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

}

.video-overlay iframe,

.video-overlay video {

    max-width: 90%;

    max-height: 90%;

    border-radius: 8px;

}

.video-close-btn {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.2);

    border: none;

    border-radius: 50%;

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

.video-close-btn:hover {

    background: rgba(255,255,255,0.3);

}



/* 3A大作播放按钮 — 白色+光环扩散 */

.featured-item .card-play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.5);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    color: #1a1a2e;

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 4;

    opacity: 0;

    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    pointer-events: none;

    padding-left: 3px;

}



.featured-item:hover .card-play-btn {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

    pointer-events: auto;

}



.featured-item-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 20px 16px 14px;

    background: linear-gradient(transparent, rgba(0,0,0,0.75));

    z-index: 2;

}



.featured-item-overlay h4 {

    font-size: 15px;

    font-weight: 600;

    color: #fff;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.featured-item-overlay p {

    font-size: 12px;

    color: rgba(255,255,255,0.6);

    margin-top: 4px;

}



/* ===== 5. 热门游戏榜单 ===== */

.ranking-section {

    padding: 10px 0;

    background: #f0f1f3;

    max-width: 1406px;

    margin: 0 auto;

    border-radius: var(--radius-md);

}



.ranking-container {

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.ranking-header {

    text-align: center;

    margin-bottom: 24px;

}



.ranking-header h3 {

    font-size: 20px;

    font-weight: 600;

    color: #1a1a2e;

}



.ranking-header p {

    font-size: 13px;

    color: #6e7094;

    margin-top: 6px;

}



.ranking-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



.ranking-card {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: var(--radius-md);

    overflow: hidden;

}



.ranking-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 16px;

    border-bottom: 1px solid #e5e7eb;

}



.ranking-card-header h4 {

    font-size: 15px;

    font-weight: 600;

    color: #1a1a2e;

}



.ranking-card-header a {

    font-size: 12px;

    color: #6e7094;

}



.ranking-list {

    list-style: none;

}



.ranking-list li {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 16px;

    border-bottom: 1px solid #f0f1f3;

    transition: background 0.2s;

}



.ranking-list li:last-child { border-bottom: none; }

.ranking-list li:hover { background: rgba(108,92,231,0.04); }



.ranking-num {

    width: 22px;

    height: 22px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 700;

    background: #f0f1f3;

    color: #6e7094;

    flex-shrink: 0;

}



.ranking-list li:nth-child(1) .ranking-num { background: var(--danger); color: #fff; }

.ranking-list li:nth-child(2) .ranking-num { background: var(--warning); color: #fff; }

.ranking-list li:nth-child(3) .ranking-num { background: var(--success); color: #fff; }



.ranking-list a {

    flex: 1;

    min-width: 0;

    font-size: 13px;

    color: #4a4a5a;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.ranking-list a:hover { color: var(--accent); }



.ranking-views {

    font-size: 12px;

    color: #999;

    flex-shrink: 0;

}



/* 资讯列表网格 - 3列 */

.news-list-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.news-list-col {

    background: #ffffff;

    border-radius: var(--radius);

    padding: 16px;

    transition: all 0.3s;

}



.news-list-col:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(0,0,0,0.1);

}



.news-list-col .wdyx-header {

    justify-content: flex-start;

}



.news-list-col .wdyx-header h3 {

    margin-left: 0;

}



.news-list-col .wdyx-header p {

    text-align: left;

    margin-left: 0;

}



.news-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.news-list-item {

    display: grid;

    grid-template-columns: 24px 1fr auto;

    align-items: center;

    gap: 8px;

    padding: 10px 8px;

    border-radius: var(--radius-sm);

    text-decoration: none;

    transition: all 0.2s;

}



.news-list-item:hover {

    background: rgba(108,92,231,0.06);

}



.news-list-num {

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f0f1f3;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 600;

    color: #6e7094;

}



.news-list-num.top {

    background: linear-gradient(135deg, #ff4757, #ff6b81);

    color: #fff;

}



.news-list-title {

    font-size: 13px;

    color: #1a1a2e;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.news-list-item:hover .news-list-title {

    color: var(--primary);

}



.news-list-time {

    font-size: 11px;

    color: #999;

    white-space: nowrap;

}



.news-list-empty {

    padding: 40px 20px;

    text-align: center;

    color: #999;

    font-size: 13px;

}



/* ===== 6. VIP会员区 ===== */

.vip-section {

    padding: 24px 0;

    background: transparent;

    border-top: 1px solid #e5e7eb;

    max-width: 1406px;

    margin: 0 auto;

}



.vip-container {

    max-width: 1406px;

    margin: 0 auto;

    padding: 0 20px;

}



.vip-header {

    text-align: center;

    margin-bottom: 36px;

}



.vip-header h3 {

    font-size: 22px;

    font-weight: 700;

    color: #1a1a2e;

}



.vip-header p {

    font-size: 14px;

    color: #6e7094;

    margin-top: 8px;

}



.vip-plans-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.vip-plan-card {

    position: relative;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: var(--radius-lg);

    padding: 24px 18px;

    text-align: center;

    transition: all 0.3s;

}



.vip-plan-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(108,92,231,0.15);

}



.vip-plan-card.recommended {

    border-color: var(--vip-gold);

    box-shadow: 0 0 40px rgba(249,202,36,0.08);

}



.vip-plan-card.recommended::before {

    content: '最超值';

    position: absolute;

    top: -1px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--gradient-warning);

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    padding: 4px 16px;

    border-radius: 0 0 8px 8px;

}



.vip-plan-type {

    font-size: 16px;

    font-weight: 600;

    color: #1a1a2e;

    margin-bottom: 4px;

}



.vip-plan-period {

    font-size: 12px;

    color: #6e7094;

    margin-bottom: 16px;

}



.vip-plan-price {

    font-size: 32px;

    font-weight: 700;

    color: var(--vip-gold);

    margin-bottom: 4px;

}



.vip-plan-price small {

    font-size: 14px;

    font-weight: 400;

    color: #6e7094;

}



.vip-plan-desc {

    font-size: 13px;

    color: #6e7094;

    margin-bottom: 20px;

}



.vip-plan-features {

    list-style: none;

    text-align: left;

    margin-bottom: 24px;

}



.vip-plan-features li {

    padding: 8px 0;

    font-size: 13px;

    color: #4a4a5a;

    border-bottom: 1px solid #f0f1f3;

}



.vip-plan-features li:last-child { border-bottom: none; }



.vip-plan-btn {

    display: block;

    padding: 12px;

    background: var(--gradient-primary);

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    border-radius: var(--radius);

    text-align: center;

    transition: all 0.3s;

}



.vip-plan-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(108,92,231,0.3);

    color: #fff;

}



/* ===== 7. 底部样式覆盖 ===== */

.footer {

    background: #ffffff;

    border-top: 1px solid #e5e7eb;

    padding: 40px 0 24px;

    margin-top: 48px;

}



.footer-brand p { color: #666; }



.footer h4 { color: #333; }



.footer-links a { color: #666; }

.footer-links a:hover { color: var(--primary); }



.footer-bottom {

    border-top: 1px solid #e5e7eb;

    color: #999;

}



/* ===== 8. 响应式 ===== */

@media (max-width: 1200px) {

    .ranking-grid { grid-template-columns: repeat(3, 1fr); }

}



@media (max-width: 992px) {

    .hero-fullscreen-slider { height: 350px; }

    .hero-ads-container { grid-template-columns: repeat(3, 1fr); }

    .home-nav-grid { grid-template-columns: repeat(2, 1fr); }

    .wdyx-grid { grid-template-columns: repeat(3, 1fr); }

    .featured-grid { grid-template-columns: 1fr; }

    .featured-right { grid-template-columns: repeat(2, 1fr); }

    .ranking-grid { grid-template-columns: 1fr; }

    .vip-plans-grid { grid-template-columns: repeat(2, 1fr); }

    .nav-icon-grid { grid-template-columns: repeat(4, 1fr); }

}



@media (max-width: 768px) {

    .hero-fullscreen-slider { height: 250px; }

    .hero-slide-content { padding: 0 24px; }

    .hero-slide-content h2 { font-size: 24px; }

    .hero-slide-content p { font-size: 14px; }

    .hero-nav-btn { width: 36px; height: 36px; font-size: 14px; }

    .hero-nav-btn.prev { left: 10px; }

    .hero-nav-btn.next { right: 10px; }

    .hero-ads-container { grid-template-columns: repeat(2, 1fr); }

    .home-nav-grid { grid-template-columns: 1fr; }

    .wdyx-grid { grid-template-columns: repeat(2, 1fr); }

    .game-grid-2col { grid-template-columns: 1fr; }

    .game-list-item { flex-direction: column; }

    .game-list-cover { width: 100%; height: 140px; }

    .nav-icon-grid { grid-template-columns: repeat(4, 1fr); }

    .nav-icon-emoji { width: 28px; height: 28px; font-size: 14px; }

}