* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #FFFEFA;
    color: #5C3D2E;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* ===== 金卷·羊皮纸纹理背景 + 轻柔金色流动 ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(180deg, #FDF8F2, #FFF4E6, #FDF8F2);
    color: #5C3D2E;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* 羊皮纸纹理叠加层 */
.parchment-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background:
        /* 第1层：羊皮纸基底渐变 */
        linear-gradient(180deg, #FDF8F2, #FFF4E6, #FDF8F2),
        /* 第2层：极细丝绸条纹纹理（半透明） */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(212, 167, 116, 0.03) 3px,
            rgba(212, 167, 116, 0.03) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(212, 167, 116, 0.02) 3px,
            rgba(212, 167, 116, 0.02) 4px
        );
}

/* ===== 轻柔金色流动光效 ===== */
.parchment-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* 左上柔和光晕 */
        radial-gradient(ellipse at 15% 20%, rgba(255,240,210,0.18) 0%, transparent 50%),
        /* 右中暖金流 */
        radial-gradient(ellipse at 85% 60%, rgba(212,167,116,0.10) 0%, transparent 45%),
        /* 底部微光 */
        radial-gradient(ellipse at 50% 90%, rgba(232,201,107,0.08) 0%, transparent 40%);
    animation: goldFlowGentle 12s ease-in-out infinite alternate;
}

@keyframes goldFlowGentle {
    0%   { opacity: 0.6; }
    33%  { opacity: 1; }
    66%  { opacity: 0.75; }
    100% { opacity: 0.95; }
}

/* ===== 金色微粒点缀 ===== */
.parchment-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* 主金点 */
        radial-gradient(circle at 10% 15%, rgba(212, 167, 116, 0.5) 2px, transparent 3px),
        radial-gradient(circle at 25% 65%, rgba(232, 201, 107, 0.45) 2px, transparent 3px),
        radial-gradient(circle at 40% 30%, rgba(212, 167, 116, 0.4) 1.5px, transparent 2.5px),
        radial-gradient(circle at 58% 75%, rgba(255, 240, 210, 0.5) 2px, transparent 3px),
        radial-gradient(circle at 72% 20%, rgba(232, 201, 107, 0.42) 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 55%, rgba(212, 167, 116, 0.48) 2px, transparent 3px),
        radial-gradient(circle at 18% 88%, rgba(255, 245, 220, 0.38) 1.5px, transparent 2.5px),
        radial-gradient(circle at 68% 92%, rgba(232, 201, 107, 0.44) 2px, transparent 3px);
    animation: goldDustTwinkle 10s ease-in-out infinite alternate;
}

@keyframes goldDustTwinkle {
    0%   { opacity: 0.4; }
    33%  { opacity: 0.85; }
    66%  { opacity: 0.55; }
    100% { opacity: 0.9; }
}

/* ===== 柔和光线穿透效果 ===== */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 140%;
    pointer-events: none;
    z-index: 0;
    background:
        /* 轻柔暖金光锥 */
        conic-gradient(
            from 250deg at 50% -5%,
            transparent 0deg,
            transparent 35deg,
            rgba(255, 248, 230, 0.04) 38deg,
            rgba(255, 240, 210, 0.07) 42deg,
            rgba(255, 235, 200, 0.04) 46deg,
            transparent 50deg,
            transparent 75deg,
            rgba(232, 201, 107, 0.02) 80deg,
            rgba(212, 167, 116, 0.04) 85deg,
            rgba(232, 201, 107, 0.02) 90deg,
            transparent 95deg,
            transparent 360deg
        );
    animation: lightRayGentle 20s ease-in-out infinite alternate;
}

@keyframes lightRayGentle {
    0%   { opacity: 0.5; transform: rotate(-1deg) translateY(0); }
    50%  { opacity: 0.85; transform: rotate(1deg) translateY(-10px); }
    100% { opacity: 0.7; transform: rotate(-0.5deg) translateY(-3px); }
}

/* ===== 柔和金色漂浮微粒 ===== */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* 大光点 - 左上 */
        radial-gradient(circle at 8% 12%, rgba(212,167,116,0.06) 4px, transparent 6px),
        /* 中光点 - 右侧 */
        radial-gradient(circle at 90% 25%, rgba(232,201,107,0.05) 3px, transparent 5px),
        /* 小光点 - 中下 */
        radial-gradient(circle at 55% 85%, rgba(255,240,210,0.07) 2px, transparent 4px);
    background-size: 280px 220px, 240px 260px, 180px 150px;
    background-position: 3% 6%, 92% 25%, 55% 85%;
    animation: goldDustFloat 22s ease-in-out infinite alternate;
}

@keyframes goldDustFloat {
    0%   { opacity: 0.35; transform: translate(0, 0); }
    50%  { opacity: 0.75; transform: translate(10px, -15px); }
    100% { opacity: 0.55; transform: translate(-6px, -6px); }
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 10px;
    scroll-snap-type: x proximity;
}

@media (min-width: 768px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* ===== 漂浮鹅卵石动画 ===== */
@keyframes cardFloat {
    0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0px); }
    45% { transform: rotate(calc(var(--tilt, 0deg) * -1)) translateY(-3px); }
    90% { transform: rotate(calc(var(--tilt, 0deg) * 0.7)) translateY(1.5px); }
}

.game-card {
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    animation: cardFloat var(--float-dur, 9s) ease-in-out var(--float-delay, 0s) infinite;
    cursor: pointer;
}

.game-card[data-float-dur] {
    --float-dur: calc(attr(data-float-dur) * 1s);
    --float-delay: calc(attr(data-float-delay) * 1s);
}

.game-card:hover {
    transform: translateY(-6px) scale(1.02) rotate(0deg) !important;
    box-shadow: 0 12px 32px rgba(212,168,67,0.24), 0 0 24px rgba(232,201,107,0.15), inset 0 0 10px rgba(255,240,210,0.08);
    animation-play-state: paused !important;
}

.game-card:hover img {
    transform: scale(1.03);
}

/* ===== 新闻列表项 - 左菱形缩略图 + 右侧标题摘要（金卷方案）===== */
.news-list-item {
    border-bottom: none;
    position: relative;
}
.news-list-item:last-child {
    border-bottom: none;
}

/* 金色渐变分隔线 */
.news-list-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 60px; right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4A574, transparent);
}

.news-list-item:hover .news-diamond-thumb {
    filter: brightness(1.1);
}

/* 列表项按下时菱形缩略图闪白光 */
.news-list-item:active .news-touch-flash {
    animation: thumbFlashWhite 0.4s ease-out forwards;
}

@keyframes thumbFlashWhite {
    0%   { opacity: 0; transform: translateX(-100%) rotate(45deg); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%) rotate(45deg); }
}

/* 新闻列表网格适配 */
.games-grid .news-list-item {
    width: 100%;
}

/* ===== 对角扫光动画 (8秒周期) - 金色 ===== */
.card-sweep-light {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(212, 168, 67, 0.08) 45%,
        rgba(212, 168, 67, 0.18) 50%,
        rgba(212, 168, 67, 0.08) 55%,
        transparent 80%
    );
    z-index: 8;
    pointer-events: none;
    animation: cardSweepGleam 8s ease-in-out infinite;
}

@keyframes cardSweepGleam {
    0%, 65% { left: -100%; opacity: 0; }
    72% { opacity: 1; }
    85% { left: 200%; opacity: 0; }
    100% { left: 200%; opacity: 0; }
}

/* ===== 触摸反馈 - 金色光条扩散（卷轴方案）===== */
.game-card:active {
    transform: scale(0.98) translateY(2px) rotate(0deg) !important;
    box-shadow:
        inset 4px 4px 18px rgba(0, 0, 0, 0.04),
        0 4px 24px rgba(212, 167, 116, 0.22),
        0 0 36px rgba(212, 167, 116, 0.10);
}

.card-touch-petal {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
}
.game-card:active .card-touch-petal::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(212,167,116,0.5);
    animation: petalBurstExpand 0.6s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes petalBurstExpand {
    0% { box-shadow: 0 0 0 0 rgba(212,167,116,0.5); opacity: 1; }
    100% { box-shadow: 0 0 0 35px rgba(212,167,116,0), 0 0 0 55px rgba(232,201,107,0); opacity: 0; }
}

/* ===== 标题滚动闪烁光效 ===== */
@keyframes titleShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

hr, .divider {
    display: none;
}

hr.dashed, .divider-dashed {
    display: none;
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (min-width: 768px) {
    .related-articles-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

.related-article {
    transition: all 0.35s ease;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
}

.related-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(212, 167, 116, 0.22), 0 0 22px rgba(232, 201, 107, 0.15);
}

button {
    transition: all 0.3s ease;
}

/* 轮廓香槟金线框按钮 - 按下填满暖金 */
.gem-btn-outline:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(212, 167, 116, 0.28);
    background: rgba(212, 167, 116, 0.08);
}
.gem-btn-outline:active {
    background: linear-gradient(135deg, #D4A574, #E8C96B);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(212, 167, 116, 0.35);
    transform: scale(0.98);
}

button:not(.gem-btn-outline):hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(212, 167, 116, 0.28);
}

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

a {
    transition: all 0.3s ease;
}

::selection {
    background: rgba(212, 167, 116, 0.3);
    color: #5C3D2E;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #FFF4E6;
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 167, 116, 0.38);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 167, 116, 0.58);
}