/* 示例：明亮主题的颜色变量调整方向 */
:root {
    /* ... (字体等其他变量保持) ... */

    --color-background-dark: #ffffff;         /* 主背景 - 白色 */
    --color-background-medium: #f4f7f9;      /* 交替区块背景 - 浅灰 */
    --color-background-light: #ffffff;         /* 卡片背景 - 白色 */

    --color-text-primary: #333333;        /* 主要文字 - 深灰 */
    --color-text-secondary: #666666;      /* 次要文字 - 中灰 */
    --color-text-headings: #111111;       /* 标题 - 黑色 */

    /* 强调色可能需要根据亮色背景调整，确保对比度和美感 */
    --color-accent-primary: #007bff;       /* 例如：清爽的蓝色 */
    --color-accent-primary-hover: #0056b3;
    --color-accent-secondary: #28a745;     /* 例如：清新的绿色 */
    --color-accent-secondary-hover: #1e7e34;

    /* 页脚变量也需要相应调整为亮色主题 */
    --footer-bg: #e9eef2;
    --footer-text: var(--color-text-secondary);
    --footer-heading-text: var(--color-text-headings);
    --footer-link-color: var(--color-text-secondary);
    --footer-link-hover-color: var(--color-accent-primary);
    --footer-border-color: #d4dae0; /* 亮色主题下的分割线 */

    /* ... (其他变量如 header-height 等保持) ... */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
    scroll-padding-top: var(--header-height); /* OPTIMIZATION: Fix for fixed header obscuring content on anchor links */
}

body {
    font-family: var(--font-secondary);
    background-color: var(--color-background-dark);
    color: var(--color-text-primary);
    line-height: 1.7;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: var(--color-accent-primary);
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--color-accent-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    line-height: 1.3;
    margin-bottom: 0.8em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
}
h2.section-title span {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}
h2.section-title span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--color-accent-primary);
    border-radius: 2px;
}
/* For sections with .light-text class (typically on dark backgrounds like download-emphasis-bg) */
h2.section-title.light-text span { color: var(--color-text-headings); } /* Ensure title text is light */
h2.section-title.light-text span::after {
    background-color: var(--color-accent-secondary); /* Use secondary accent for the line */
}


/* ========== Header ========== */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    /* --- 修改背景色为白色 --- */
    background-color: #ffffff; /* 直接使用白色 */
    /* 如果希望有轻微透明度，可以使用 rgba(255, 255, 255, 0.7); */
    /* backdrop-filter: blur(10px); */ /* 毛玻璃效果在白色背景上可能不明显，可以保留或移除 */
    z-index: 1000;
    transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    /* --- 修改阴影以适应浅色背景 --- */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 较浅的阴影 */
}

/* 如果您有 .scrolled 状态的header样式，也需要一并修改 */
/*
#main-header.scrolled {
    background-color: #ffffff; // 或者 rgba(255, 255, 255, 0.98);
    box-shadow: 0 3px 10px rgba(0,0,0,0);
}
*/
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.logo img {
    height: calc(var(--header-height) - 30px);
    max-height: 40px;
}
#main-nav ul {
    list-style: none;
    display: flex;
}
#main-nav ul li {
    margin-left: 30px;
}
#main-nav ul li a {
    color: var(--color-text-primary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    padding: 5px 0;
    position: relative;
}
#main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-primary);
    transition: width var(--transition-speed) ease;
}
#main-nav ul li a:hover::after,
#main-nav ul li a.active::after { /* Assuming 'active' class might be added by JS for current page */
    width: 100%;
}
#main-nav ul li a:hover {
    color: var(--color-text-headings);
}


/* ========== CTA Buttons ========== */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--border-radius-main);
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-speed) ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.header-download-button {
    background-color: var(--color-accent-primary);
    color: var(--color-background-dark); /* Text on bright button should be dark */
    font-size: 0.9rem;
    padding: 10px 20px;
}
.header-download-button:hover {
    background-color: var(--color-accent-primary-hover);
    color: var(--color-background-dark);
    transform: scale(1.05);
}

.primary-action-button {
    background-color: var(--color-accent-primary);
    color: var(--color-background-dark); /* Text on bright button should be dark */
    font-size: 1.3rem;
    padding: 20px 50px;
}
.primary-action-button:hover {
    background-color: var(--color-accent-primary-hover);
    color: var(--color-background-dark);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 20px rgba(var(--color-accent-primary), 0.4);
}
.primary-action-button.large-button {
    font-size: 1.2rem;
    padding: 18px 40px;
}

.secondary-action-button {
    background-color: rgba(255,255,255,0.7); /* Semi-transparent white on dark bg */
    color: var(--color-text-primary);
    border: 2px solid rgba(255,255,255,0.2);
    font-size: 0.9rem;
}
.secondary-action-button:hover {
    background-color: rgba(255,255,255,1);
    border-color: var(--color-accent-primary);
    color: var(--color-text-headings);
}

.outline-button {
    background-color: transparent;
    color: var(--color-accent-primary);
    border: 2px solid var(--color-accent-primary);
}
.outline-button:hover {
    background-color: var(--color-accent-primary);
    color: var(--color-background-dark); /* Text on bright button should be dark */
}

.gamelogo-icon {
    width: 54px; height: 54px; margin-right: 2px;
}
.platform-icon {
    width: 28px; height: 24px; margin-right: 10px;
}
.platform-icon-small {
    width: 18px; height: 18px; margin-right: 8px;
}
.button-text {
    margin-left: 10px;
    font-size: 1.2em;
    transition: transform var(--transition-speed) ease;
    text-transform: none;
    min-width: 250px;
}
.button-arrow {
    margin-left: 10px;
    font-size: 1.2em;
    transition: transform var(--transition-speed) ease;
}
.primary-action-button:hover .button-arrow {
    transform: translateX(5px);
}


/* ========== Hero Section ========== */
#hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    /* padding-top: var(--header-height); REMOVED: scroll-padding-top on html handles this for the whole page */
}

#hero-video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15,16,20,0) 0%, rgba(15,16,20,0) 20%, var(--color-background-dark) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    animation: heroContentFadeIn 1.2s ease-out 0.3s forwards;
    opacity: 0;
    padding: 20px; /* Add some padding for smaller screens */
}
@keyframes heroContentFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.game-title { /* 或者 #hero h1 */
    margin-bottom: 0.8em; /* 可以调整图片与下方标语的间距 */
    line-height: 0; /* 有助于消除图片下方可能出现的额外空白 */
    /* 移除或注释掉不再需要的文字相关属性: */
    /* font-family: 'Orbitron', 'Noto Sans SC', sans-serif; */
    /* font-size: clamp(3.5rem, 8vw, 6rem); */
    /* font-weight: 700; */
    /* text-shadow: 0 0 20px rgba(0,0,0,0.7); */
    /* color: var(--color-text-headings); */
    /* letter-spacing: 2px; */
    /* text-transform: uppercase; */
}

.game-title img {
    display: inline-block; /* 或者 block 如果希望它独占一行并可以设置左右margin:auto居中 */
    max-width: 100%;    /* 图片最大宽度不超过其容器 */
    max-height: 240px;  /* 限制图片标题的最大高度 */
    /* width: 800px; */ /* 或者设置一个固定宽度，但要注意响应式 */
    /* 如果希望图片在h1内水平居中 (且h1是块级元素或flex容器) */
    margin-left: auto;
    margin-right: auto;
}
.game-tagline {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    color: var(--color-text-secondary);
    margin-bottom: 2.5em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

.inline-cta-group {
    align-items: center;
    gap: 20px;
    margin-bottom: 2em;
    display:flex;
    flex-direction: column;
}

.inline-sub-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 1em;
}

.hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 1em;
    min-width: 600px;
}
.secondary-platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.release-info {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    opacity: 0.9;
}

.scroll-down-prompt {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,0.5);
    animation: scrollPromptBounce 2s infinite ease-in-out 1.5s;
}
.scroll-down-prompt:hover {
    color: var(--color-text-primary);
}
@keyframes scrollPromptBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}



/* ========== Content Sections ========== */
.content-section {
    padding: 80px 0;
}
.content-section.alt-bg {
    background-color: var(--color-background-medium);
}
.text-center { text-align: center; }
/* .light-text class is now primarily for text on .download-emphasis-bg or similar dark sections */
.section-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: -40px auto 40px auto;
}
.section-cta {
    margin-top: 40px;
    text-align: center;
}

/* ========== Community Hub Section (Redesigned Styles) ========== */

#community-hub {
    /* 使用交替区块的背景色，与截图风格类似 */
    background-color: var(--color-background-section-alt);
}

.community-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 关键：让所有卡片在行内水平居中对齐 */
    gap: 25px; /* 卡片之间的间距 */
    margin-top: 30px;
    margin-bottom: 50px; /* 为下方的按钮留出空间 */
}

.community-card-v2 {
    width: 320px; /* 固定卡片宽度 */
    background-color: var(--color-background-card); /* 卡片背景色 */
    border: 1px solid #e8e8e8; /* 细微的边框 */
    border-radius: var(--border-radius-main);
    text-decoration: none; /* 移除链接下划线 */
    color: var(--color-text-primary);
    transition: transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
    display: block; /* 确保<a>标签表现为块级 */
}

.community-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.community-card-image-wrapper {
    width: 100%;
    /* 创建一个正方形容器用于放置二维码 */
    aspect-ratio: 1 / 1;
    padding: 20px; /* 二维码周围的留白 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.community-card-qr {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 确保二维码完整显示 */
}

.community-card-text {
    padding: 20px 25px 25px 25px; /* 内容区域的内边距 */
    border-top: 1px solid #f0f0f0; /* 图片和文字之间的分割线 */
    text-align: left; /* 文字左对齐 */
}

.card-meta-date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.card-title {
    font-family: var(--font-secondary); /* 使用更易读的副字体 */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-headings);
    margin-bottom: 8px;
    line-height: 1.5;
}

.card-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}




/* ========== Footer ========== */
#main-footer {
    background-color: var(--footer-bg);
    padding: 60px 0 30px 0;
    color: var(--footer-text);
    font-size: 0.9rem;
    border-top: 1px solid var(--footer-border-color);
}
/* ... (Rest of footer styles can remain the same) ... */



/* ========== Game Features Section (Optimized for Video & Special Aspect Ratio) ========== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列布局 */
    gap: 30px; /* 卡片间距 */
    margin-top: 30px;
}

.feature-item {
    background-color: var(--color-background-card); /* 卡片背景色 */
    border-radius: var(--border-radius-large); /* 更大的圆角 */
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    overflow: hidden; /* 关键：确保视频的圆角生效 */
    display: flex; /* 使用Flex布局，让内容和视频区域分离 */
    flex-direction: column; /* 垂直排列 */
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.feature-media-container {
    width: 100%;
    /* 使用 padding-top 技巧创建16:9的宽高比容器 */
    padding-top: 56.25%; 
    position: relative; /* 作为视频绝对定位的父级 */
    background-color: #000; /* 视频加载时的黑色背景，这样留黑边时效果更好 */
    cursor: pointer; /* 鼠标悬停时显示为可点击手势 */
}

.feature-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 默认模式：覆盖容器，裁剪多余部分（适用于16:9视频）*/
}

/* --- 这里是针对第一个视频的特殊优化 --- */
/* 这条规则只对拥有 special-aspect-ratio 类的卡片中的视频生效 */
.special-aspect-ratio .feature-video {
    object-fit: contain; /* 特殊模式：完整显示视频，可能会有黑边 */
}
/* --- 优化结束 --- */


.feature-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    opacity: 0; /* 默认隐藏 */
    transition: opacity var(--transition-speed) ease;
    z-index: 5;
    pointer-events: none;
}

.feature-item:hover .feature-play-icon {
    opacity: 1; /* 鼠标悬停在卡片上时显示播放图标 */
}


.feature-content {
    padding: 25px 30px; /* 内容区域的内边距 */
    flex-grow: 1; /* 让内容区域占据剩余空间 */
    display: flex;
    flex-direction: column;
}

.feature-item h3 {
    font-size: 1.5rem;
    color: var(--color-accent-secondary); /* 使用次强调色作为标题颜色 */
    margin-bottom: 15px;
    margin-top: 0; /* 移除标题默认的上边距 */
}

.feature-item p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex-grow: 1; /* 确保在不同内容长度下，卡片底部能对齐 */
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.news-item {
    background-color: var(--color-background-light); /* Darker card on dark bg */
    border-radius: var(--border-radius-main);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.news-item a {
    display: block;
    color: var(--color-text-primary); /* Ensure link color inherits for content */
}
.news-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.news-content {
    padding: 20px;
}
.news-date {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.news-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--color-text-headings);
    line-height: 1.4;
}
.news-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Download Emphasis Section Specific BG */
.download-emphasis-bg {
    background: linear-gradient(rgba(15,16,20,0), rgba(15,16,20,0.1)), url('images/download-section-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
}
/* Ensure text within this specific section is light if the background is dark */
.download-emphasis-bg .section-title.light-text span,
.download-emphasis-bg .section-subtitle.light-text {
    color: var(--color-text-headings) !important; /* Ensure bright text */
}

/* Media Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.media-item {
    background-color: var(--color-background-light); /* Darker card on dark bg */
    border-radius: var(--border-radius-main);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.media-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0);
}
.media-item a {
    display: block;
    color: var(--color-text-primary); /* Ensure link color inherits for content */
}
.media-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.media-content {
    padding: 20px;
}
.media-date {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.media-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--color-text-headings);
    line-height: 1.4;
}
.media-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Download Emphasis Section Specific BG */
.download-emphasis-bg {
    background: linear-gradient(rgba(15,16,20,0), rgba(15,16,20,0.1)), url('images/download-section-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
}
/* Ensure text within this specific section is light if the background is dark */
.download-emphasis-bg .section-title.light-text span,
.download-emphasis-bg .section-subtitle.light-text {
    color: var(--color-text-headings) !important; /* Ensure bright text */
}

/* ========== Footer Styles ========== */
#main-footer {
    background-color: var(--footer-bg);
    padding: 60px 0 30px 0;
    color: var(--footer-text);
    font-size: 0.9rem;
    border-top: 1px solid var(--footer-border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

.footer-branding {} /* No specific styles needed beyond grid placement */

.footer-logo-link {
    display: inline-block;
    margin-bottom: 15px;
}

.footer-logo-image {
    max-height: 50px;
    width: auto;
}

.footer-game-tagline {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
}

.footer-links-column h4,
.footer-social-column h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--footer-heading-text);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links-column ul,
.footer-social-column ul {
    list-style: none;
    padding-left: 0;
}

.footer-links-column ul li,
.footer-social-column ul li {
    margin-bottom: 12px;
}

.footer-links-column ul li a,
.footer-social-column ul li a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
}

.footer-links-column ul li a:hover,
.footer-social-column ul li a:hover {
    color: var(--footer-link-hover-color);
}

.footer-legal {
    text-align: center;
    border-top: 1px solid var(--footer-border-color);
    padding-top: 30px;
    font-size: 0.85rem;
    opacity: 0.7;
}

.footer-legal p {
    margin-bottom: 8px;
}

.footer-legal a {
    color: var(--footer-link-color);
    text-decoration: underline;
}

.footer-legal a:hover {
    color: var(--footer-link-hover-color);
}


/* ========== Responsive Adjustments ========== */
@media (max-width: 992px) {
    #main-nav { display: none; } /* Implement mobile menu (burger) with JS for full solution */
    .header-container { justify-content: space-between; } /* Ensure logo and button space out */
    .logo { margin-right: auto; } /* Push logo to left */
    .header-download-button { /* Removed margin-left: auto; as it's not needed with space-between on parent */ }

    .hero-cta-group {
        /* flex-direction: column; // Already set in base style */
        /* align-items: center; // Already set in base style */
    }
    .primary-action-button { width: 80%; max-width: 350px; }
    .secondary-platforms { gap: 10px; }
    .secondary-action-button { padding: 10px 20px; font-size: 0.85rem; }

    .features-grid, .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    .container { width: 95%; }

    /* #hero { padding-top: calc(var(--header-height) + 20px); } // Not needed due to scroll-padding-top */
    .game-title { font-size: clamp(2rem, 8vw, 3.5rem); }
    .game-tagline { font-size: clamp(1rem, 4vw, 1.3rem); }

    h2.section-title { font-size: clamp(1.8rem, 6vw, 2.5rem); margin-bottom: 40px; }
    h2.section-title span { padding-bottom: 10px; }
    h2.section-title span::after { height: 3px; width: 60px; }

    .section-subtitle { font-size: 1.1rem; margin-bottom: 30px; }

    .content-section { padding: 60px 0; }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-branding,
    .footer-links-column,
    .footer-social-column {
        margin-bottom: 30px;
    }
    .footer-logo-image {
        margin: 0 auto 15px auto;
    }
    .footer-links-column ul li,
    .footer-social-column ul li {
        /* justify-content: center; // Not needed if text-align:center on parent applies */
    }
    .footer-links-column ul li a,
    .footer-social-column ul li a {
        display: inline-block; /* Allow text-align:center to work for these links */
    }
}

/* ... (您 style.css 文件中之前的所有内容保持不变) ... */


/* ========== Feature Item Click Indication (New) ========== */
.feature-media-container {
    /* ... (之前的样式保持不变) ... */
    position: relative; /* 确保播放图标可以绝对定位 */
    cursor: pointer; /* 鼠标悬停时显示为可点击手势 */
}

.feature-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    opacity: 0; /* 默认隐藏 */
    transition: opacity var(--transition-speed) ease;
    z-index: 5;
    pointer-events: none; /* 让点击事件穿透到父级 */
}

.feature-item:hover .feature-play-icon {
    opacity: 1; /* 鼠标悬停在卡片上时显示播放图标 */
}

/* ========== Video Modal Styles (New) ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* 半透明黑色背景 */
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保在最顶层 */
    opacity: 0; /* 用于动画 */
    transition: opacity 0.4s ease;
}

/* 当模态窗口被JS激活时，会添加 .active 类 */
.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 1280px; /* 视频最大宽度 */
    max-height: 90vh; /* 视频最大高度 */
    animation: zoomIn 0.4s ease-out; /* 弹出动画 */
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}


.modal-close-button {
    position: absolute;
    top: -50px; /* 放在视频框外部 */
    right: 0;
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.modal-close-button:hover {
    transform: scale(1.2);
    color: var(--color-accent-primary);
}

.video-player-wrapper {
    position: relative;
    width: 100%;
    /* 保持16:9的宽高比 */
    padding-top: 56.25%; 
    background-color: #000;
    border-radius: var(--border-radius-main);
    overflow: hidden;
}

#modal-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ========== Announcement Page Styles ========== */

.announcement-page .announcement-main {
    padding-top: var(--header-height); /* 为吸顶导航栏留出空间 */
}

/* 找到这个选择器 */
#announcement-hero {
    position: relative;
    width: 100%;
    /* --- 将下面这一行进行修改 --- */
    height: 70vh; /* 从 calc(100vh - var(--header-height)) 修改为 100vh */

    /* ... 其他属性保持不变 ... */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-text-on-dark-bg);
    overflow: hidden;
}

.announcement-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 替换为您的公测定档主视觉图 */
    background: url('images/Kv_4.0.png') no-repeat center center/cover;
    animation: zoomInBg 20s ease-out infinite alternate; /* 背景轻微缩放动画 */
}

@keyframes zoomInBg {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.announcement-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255,255,255,0.8) 20%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.2) 100%);
    z-index: 1;
}

.announcement-hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.announcement-title-logo {
    margin-bottom: 20px;
}
.announcement-title-logo img {
    max-height: 100px; /* 调整LOGO图片大小 */
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255,255,255,1)); /* 给LOGO加点光晕 */
}

.announcement-headline {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 4rem);
    text-shadow: 0 0 15px rgba(255,255,112,1);
    color: var(--color-headings-on-dark-bg);
    margin-bottom: 10px;
}

.announcement-date {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 1px;
    
    /* --- 在这里修改颜色和添加描边 --- */

    /* 1. 设置您想要的文字填充色 */
    color: var(--color-accent-primary); /* 例如，我们之前设置的蓝色 */

    /* 2. 添加描边属性 */
    -webkit-text-stroke: 1px #000000; /* 1像素宽的黑色描边 */
    /* 为了更好的兼容性，可以同时写上不带前缀的版本 */
    text-stroke: 1px #000000;
}

.countdown-container {
    margin-bottom: 40px;
}
.countdown-container p {
    font-size: 1.2rem;
    color: var(--color-text-on-dark-bg);
    opacity: 0.8;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.countdown-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.7);
    padding: 15px 20px;
    border-radius: var(--border-radius-main);
    border: 1px solid rgba(255,255,255,0.5);
    min-width: 80px;
}
.countdown-number {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.countdown-label {
    font-size: 0.9rem;
    color: #c5c5c5;
    margin-top: 5px;
}

.announcement-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}


/* Event Section Styles */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.event-card {
    background: var(--color-background-card);
    padding: 30px;
    text-align: center;
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.event-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px auto;
}
.event-card h3 {
    font-size: 1.4rem;
    color: var(--color-accent-primary);
    margin-bottom: 15px;
}
.event-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}


/* Platform & Requirements Styles */
.platform-requirements-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 左窄右宽 */
    gap: 50px;
    align-items: start;
}
.platforms-info h3, .requirements-info h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: left;
}
.platform-icons {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.platform-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.platform-icon-item img {
    width: 60px;
    height: 60px;
}
.platform-icon-item span {
    font-weight: 500;
    color: var(--color-text-primary);
}

.sys-reqs-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.sys-reqs-table th, .sys-reqs-table td {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.sys-reqs-table th {
    background-color: var(--color-background-section-alt);
    font-weight: 700;
    color: var(--color-text-primary);
}
.sys-reqs-table td {
    color: var(--color-text-secondary);
}

@media (max-width: 992px) {
    .platform-requirements-grid {
        grid-template-columns: 1fr; /* 小屏幕上改为单列 */
    }
}
@media (max-width: 768px) {
    .countdown-item { min-width: 60px; padding: 10px 15px; }
    .countdown-number { font-size: 2rem; }
}

/* ========== Contest Page Specific Styles (NEW VERSION) ========== */

.contest-page .contest-main {
    padding-top: var(--header-height);
}

/* New Contest Hero Section */
.new-contest-hero {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-on-dark-bg);
    overflow: hidden;
}

.new-contest-hero .contest-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/contest-hero-bg.png') no-repeat center center/cover;
   filter: brightness(0.7) saturate(1.2) blur(5px); /* 新增了 blur(5px) */
    transform: scale(1.05); /* 默认放大一点点 */
    transition: transform 10s ease-in-out;
}
.new-contest-hero:hover .contest-hero-bg {
    transform: scale(1);
}

.new-contest-hero .contest-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.7) 100%);
    z-index: 1;
}

.new-contest-hero .contest-hero-content {
    position: relative;
    z-index: 2;
}
.new-contest-hero .contest-hero-subtitle {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-text-on-dark-bg);
    opacity: 0.9;
    -webkit-text-stroke: 1px white; /* 1像素宽的白色描边 */
    text-stroke: 1px white;       /* 标准写法，与上面一起使用以获得最佳兼容性 */
}

/* --- 新增：定义一个让渐变背景滚动的动画 --- */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* --- 定位到这个样式规则并替换 --- */
.new-contest-hero .contest-hero-title {
    /* 1. 定义一个炫彩的渐变背景 */
    background: linear-gradient(
        90deg, /* 渐变方向：从左到右 */
        #ffac00, /* 您的次要强调色-金色 */
        #ff5252, /* 添加一个活力的洋红色 */
        #8e2de2, /* 添加一个迷人的紫色 */
        #00e5ff, /* 您的主要强调色-青色 */
        #ffac00  /* 再次回到金色，让动画循环时无缝衔接 */
    );
    /* 将背景尺寸设置为2倍宽度，这样才有移动的空间 */
    background-size: 200% auto;

    /* 2. 关键步骤：将背景裁剪为文字的形状 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. 关键步骤：将文字颜色设为透明，以显示出背景 */
    /* 使用一个几乎看不见的颜色并配合 -webkit-text-fill-color 获得最佳兼容性 */
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* 4. 应用上面定义的动画效果 */
    animation: gradient-animation 8s ease-in-out infinite;

    /* --- 其他原有样式保持不变 --- */
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin: 10px 0 15px 0;
    text-shadow: none; /* 渐变文字通常不需要文字阴影 */
}

.new-contest-hero .contest-hero-dates {
    /* --- 新增样式，用于添加底色 --- */
    display: inline-block; /* 关键：让背景色只包裹文字内容，而不是占满整行 */
    background-color: var(--color-accent-primary); /* 使用您的主强调色（蓝色）作为底色 */
    color:#ffffff; /* 确保文字在底色上清晰可读（白色） */
    padding: 10px 30px; /* 在文字周围增加内边距，让标签更饱满 */
    border-radius: 30px; /* 添加圆角，使其呈胶囊形状 */
    text-shadow: none; /* 移除之前的文字阴影，因为现在有底色了 */

    /* --- 原有及微调的样式 --- */
    font-size: 1.3rem;
    font-weight: 700; /* 可以加粗字体以增强对比 */
    margin-bottom: 40px;
    letter-spacing: 1px; /* 保持或调整字间距 */
}

/* Timeline Section */
#timeline {
    background-color: var(--color-background-section-alt);
}
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
    text-align: center;
}
.timeline-item {
    background-color: var(--color-background-body);
    padding: 25px 20px;
    border-radius: var(--border-radius-main);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.timeline-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 1;
}
.timeline-title {
    font-size: 1.3rem;
    color: var(--color-text-headings);
    margin-bottom: 5px;
}
.timeline-date {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Prizes Section */
#prizes {
    background-color: var(--color-background-body);
}
.prizes-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}
.prizes-grid-new.other-awards {
    margin-top: 30px;
}
.prize-card {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.prize-header {
    padding: 20px 30px;
    color: #fff;
}
.prize-header h3 {
    color: #fff;
    margin: 0;
    font-size: 1.6rem;
}
.prize-header span {
    font-size: 0.9rem;
    opacity: 0.8;
}
.prize-content {
    background-color: #fff;
    padding: 25px 30px;
}
.prize-content p {
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.prize-content ul {
    list-style: none;
    padding-left: 0;
}
.prize-content ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}
.prize-content ul li::before {
    content: '🎁'; /* Gift icon */
    position: absolute;
    left: 0;
    top: 2px;
}

.excellence-award .prize-header { background: linear-gradient(135deg, #2472ff, #00c6ff); } /* Blue gradient */
.popularity-award .prize-header { background: linear-gradient(135deg, #ff512f, #f09819); } /* Orange/Red gradient */
.participation-award .prize-header { background: linear-gradient(135deg, #43e97b, #38f9d7); } /* Green gradient */
.special-bonus-award .prize-header { background: linear-gradient(135deg, #8e2de2, #4a00e0); } /* Purple gradient */

.prize-note {
    text-align: center;
    margin-top: 30px;
    color: var(--color-text-secondary);
    font-style: italic;
}


/* Submission Section */
.submission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
}
.submission-card {
    background-color: var(--color-background-section-alt);
    padding: 30px;
    border-radius: var(--border-radius-large);
    text-align: center;
}
.submission-platform-icon {
    height: 60px;
    width: auto;
    margin: 0 auto 20px auto;
}
.submission-card h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}
.submission-card ol {
    text-align: left;
    padding-left: 25px;
    margin-bottom: 30px;
    color: var(--color-text-secondary);
}
.submission-card ol li {
    margin-bottom: 10px;
}

/* Rules Section */
.rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
}
.rules-column h3 {
    color: var(--color-text-headings);
    font-size: 1.5rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent-primary);
    margin-bottom: 20px;
}
.rules-column ul {
    list-style: none;
    padding-left: 0;
}
.rules-column ul li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    line-height: 1.8;
}
.rules-column ul li::before {
    content: '✓';
    color: var(--color-accent-secondary);
    font-weight: bold;
    position: absolute;
    left: 0;
}
.qq-contact {
    font-weight: bold;
    color: var(--color-accent-primary);
}
.qq-qr-code {
    max-width: 180px;
    margin-top: 15px;
}

/* Responsive Adjustments for New Contest Page */
@media (max-width: 992px) {
    .prizes-grid-new, .submission-grid, .rules-grid {
        grid-template-columns: 1fr;
    }
}
/* --- 优化：让“前往投稿”按钮换行并居中 --- */
.submission-card .cta-button {
    display: block;      /* 关键：将按钮从内联元素变为块级元素，使其独占一行 */
    margin-top: 35px;    /* 在按钮和上方的列表之间增加30px的间距 */
    margin-left: auto;   /* 与下面的 margin-right: auto; 一起实现水平居中 */
    margin-right: auto;
    max-width: 380px;    /* 限制按钮的最大宽度，避免它在卡片中显得过宽 */
}
/* --- 优化：让活动页英雄区的“立即投稿”按钮换行 --- */
.new-contest-hero .cta-button {
    display: block;      /* 关键：将按钮变为块级元素，使其独占一行 */
    margin-left: auto;   /* 与下面的 margin-right: auto; 一起实现水平居中 */
    margin-right: auto;
    max-width: 320px;    /* 限制按钮的最大宽度，避免它在卡片中显得过宽 */
}




/* ========== "Coming Soon" Placeholder Page Styles ========== */

.placeholder-main {
    padding-top: var(--header-height); /* 为吸顶导航栏留出空间 */
}

.placeholder-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height)); /* 确保它至少占满导航栏以下的全屏高度 */
    width: 100%;
    padding: 60px 0;
    background-color: var(--color-background-section-alt); /* 使用浅灰色背景 */
}

.placeholder-content {
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
    animation: fadeInPlaceholder 0.8s ease-out;
}

@keyframes fadeInPlaceholder {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.placeholder-image {
    max-width: 180px;
    width: 100%;
    margin: 0 auto 30px auto;
    opacity: 0.7;
}

.placeholder-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 2.8rem);
    color: var(--color-text-headings);
    margin-bottom: 15px;
}

.placeholder-text {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 40px;
}

.placeholder-cta-group {
    margin-bottom: 20px;
}

/* 移除按钮默认边框，让它看起来更像我们自定义的按钮 */
#go-back-button {
    border: none; 
}

.placeholder-alt-link {
    color: var(--color-text-secondary);
    text-decoration: underline;
    font-size: 0.9rem;
}
.placeholder-alt-link:hover {
    color: var(--color-accent-primary);
}


/* ========== miHoYo-style News Page Styles ========== */

.news-list-main {
    padding: var(--header-height) 0 80px 0; /* Add padding at the bottom */
    background-color: var(--color-background-body); /* Ensure light background */
}

.page-content-container {
    position: relative;
}

.vertical-text-decoration {
    position: absolute;
    top: 60px;
    right: -60px; /* Adjust position to be on the side */
    font-family: var(--font-primary);
    font-size: 120px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.04); /* Very light grey color */
    writing-mode: vertical-rl; /* Makes text vertical */
    text-orientation: mixed;
    letter-spacing: 10px;
    z-index: 1;
    pointer-events: none; /* Make text non-interactive */
}

.news-body-content {
    position: relative;
    z-index: 2; /* Ensure content is above the vertical text */
    max-width: 900px; /* Limit the width of the content area */
    margin: 60px auto 0 auto;
}

/* miHoYo-style Filters */
.news-filters-mihoyo {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 40px;
}

.filter-btn-mihoyo {
    padding: 15px 5px; /* Adjust padding */
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-secondary);
    border: none;
    border-bottom: 3px solid transparent; /* Bottom border for active state */
    background-color: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed-fast) ease;
}

.filter-btn-mihoyo:hover {
    color: var(--color-text-primary);
}

.filter-btn-mihoyo.active {
    color: var(--color-accent-primary); /* Blue color for active tab */
    border-bottom-color: var(--color-accent-primary);
    font-weight: 700;
}

/* miHoYo-style News List */
.news-list-mihoyo {
    /* No special styles needed for the list container itself */
}

.news-item-mihoyo {
    border-bottom: 1px solid #f0f0f0;
    padding: 30px 0;
}
.news-item-mihoyo:first-child {
    padding-top: 0;
}
.news-item-mihoyo:last-child {
    border-bottom: none;
}

.news-link-mihoyo {
    display: flex;
    gap: 25px;
    align-items: flex-start; /* Align items to the top */
    text-decoration: none;
}

.news-thumbnail-mihoyo {
    flex-shrink: 0;
    width: 240px;
    height: 135px; /* 16:9 ratio */
    border-radius: var(--border-radius-main);
    overflow: hidden;
}
.news-thumbnail-mihoyo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.news-link-mihoyo:hover .news-thumbnail-mihoyo img {
    transform: scale(1.05);
}

.news-content-mihoyo {
    flex-grow: 1;
    position: relative;
    padding-right: 100px; /* Space for the date */
}

.news-date-mihoyo {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    color: var(--color-text-secondary);
}
.news-date-mihoyo .day-month {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
}
.news-date-mihoyo .year {
    font-size: 0.9rem;
}

.news-text-mihoyo h3 {
    font-size: 1.25rem;
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-text-headings);
    margin-top: 0;
    margin-bottom: 10px;
    transition: color var(--transition-speed-fast) ease;
}
.news-link-mihoyo:hover .news-text-mihoyo h3 {
    color: var(--color-accent-primary);
}
.news-text-mihoyo p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Re-using pagination styles from Redesigned version is fine */
/* Ensure these styles are present if you removed them */
.pagination-redesigned {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.pagination-redesigned .pagination-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border: 2px solid transparent;
    border-radius: var(--border-radius-main);
    color: var(--color-text-secondary);
    font-weight: 700;
    font-family: var(--font-primary);
    text-decoration: none;
    transition: all var(--transition-speed-fast) ease;
}
.pagination-redesigned .pagination-link:hover {
    color: var(--color-accent-primary);
    border-color: #e0e0e0;
}
.pagination-redesigned .pagination-link.active {
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent-primary);
}
.pagination-redesigned .pagination-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* Responsive adjustments for miHoYo-style News Page */
@media (max-width: 768px) {
    .vertical-text-decoration {
        display: none; /* Hide vertical text on small screens */
    }
    .news-body-content {
        margin-top: 30px;
    }
    .news-link-mihoyo {
        flex-direction: column; /* Stack image and text vertically */
    }
    .news-thumbnail-mihoyo {
        width: 100%;
        height: auto; /* Auto height */
        aspect-ratio: 16 / 9; /* Maintain ratio */
    }
    .news-content-mihoyo {
        padding-right: 0; /* Remove padding for date */
        margin-top: 15px;
    }
    .news-date-mihoyo {
        position: static; /* Let date flow normally */
        text-align: left;
        margin-bottom: 15px;
    }
}