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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #FFFDF7;
    color: #6B5012;
    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层: 基底径向渐变 */
        radial-gradient(circle at 50% 40%, #FFF8EC, #FFF2DE 50%, #FFFDF7 100%),
        /* 第2层: 菱形网格图案（珠宝展柜感） */
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 38px,
            rgba(212, 168, 67, 0.04) 38px,
            rgba(212, 168, 67, 0.04) 40px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 38px,
            rgba(212, 168, 67, 0.04) 38px,
            rgba(212, 168, 67, 0.04) 40px
        ),
        #FFFDF7;
    overflow: hidden;
}

/* ===== 浮动宝石菱形装饰（4个大菱形缓慢漂浮）===== */
.parchment-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* 左上大菱形 */
        linear-gradient(135deg, transparent 45%, rgba(212,168,67,0.06) 48%, rgba(232,201,107,0.08) 50%, rgba(212,168,67,0.06) 52%, transparent 55%),
        /* 右上菱形 */
        linear-gradient(225deg, transparent 42%, rgba(201,160,48,0.05) 46%, rgba(212,168,67,0.07) 50%, rgba(201,160,48,0.05) 54%, transparent 58%),
        /* 左下菱形 */
        linear-gradient(45deg, transparent 43%, rgba(232,201,107,0.06) 47%, rgba(212,168,67,0.08) 50%, rgba(232,201,107,0.06) 53%, transparent 57%),
        /* 右下菱形 */
        linear-gradient(315deg, transparent 44%, rgba(212,168,67,0.05) 48%, rgba(201,160,48,0.07) 50%, rgba(212,168,67,0.05) 52%, transparent 56%);
    background-size: 400px 300px, 350px 320px, 380px 290px, 360px 310px;
    background-position: 5% 8%, 85% 12%, 10% 75%, 88% 80%;
    animation: gemFloatPattern 25s ease-in-out infinite alternate;
}

@keyframes gemFloatPattern {
    0%   { opacity: 0.6; transform: translateY(0) scale(1); }
    33%  { opacity: 1; transform: translateY(-8px) scale(1.01); }
    66%  { opacity: 0.7; transform: translateY(4px) scale(0.99); }
    100% { opacity: 0.9; transform: translateY(-3px) scale(1.005); }
}

/* ===== 金色宝石光点粒子群 ===== */
.parchment-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* 主星点 */
        radial-gradient(circle at 8% 12%, rgba(255, 248, 220, 0.9) 2px, transparent 3px),
        radial-gradient(circle at 22% 68%, rgba(255, 240, 180, 0.85) 3px, transparent 4px),
        radial-gradient(circle at 38% 28%, rgba(255, 235, 170, 0.8) 2px, transparent 3px),
        radial-gradient(circle at 55% 72%, rgba(255, 245, 200, 0.9) 3px, transparent 4px),
        radial-gradient(circle at 70% 18%, rgba(255, 238, 190, 0.85) 2px, transparent 3px),
        radial-gradient(circle at 82% 58%, rgba(255, 242, 185, 0.88) 3px, transparent 4px),
        radial-gradient(circle at 15% 42%, rgba(255, 230, 165, 0.75) 2px, transparent 3px),
        radial-gradient(circle at 45% 88%, rgba(255, 236, 175, 0.82) 2px, transparent 3px),
        radial-gradient(circle at 65% 38%, rgba(255, 244, 195, 0.86) 3px, transparent 4px),
        radial-gradient(circle at 92% 25%, rgba(255, 228, 160, 0.78) 2px, transparent 3px),
        radial-gradient(circle at 28% 92%, rgba(255, 240, 188, 0.84) 2px, transparent 3px),
        radial-gradient(circle at 78% 82%, rgba(255, 234, 172, 0.8) 2px, transparent 3px),
        /* 次级小点 */
        radial-gradient(circle at 5% 55%, rgba(212, 168, 67, 0.35) 1.5px, transparent 2.5px),
        radial-gradient(circle at 33% 18%, rgba(232, 201, 107, 0.32) 2px, transparent 3px),
        radial-gradient(circle at 62% 55%, rgba(201, 160, 48, 0.30) 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 42%, rgba(212, 168, 67, 0.34) 2px, transparent 3px),
        radial-gradient(circle at 48% 5%, rgba(232, 201, 107, 0.28) 1.5px, transparent 2.5px);
    animation: gemSparkle 14s ease-in-out infinite alternate, starDrift 40s linear infinite;
}

@keyframes gemSparkle {
    0%   { opacity: 0.5; filter: blur(0px); }
    20%  { opacity: 0.85; filter: blur(0.5px); }
    40%  { opacity: 0.6; filter: blur(0px); }
    60%  { opacity: 1; filter: blur(1px); }
    80%  { opacity: 0.7; filter: blur(0px); }
    100% { opacity: 0.9; filter: blur(0.5px); }
}

/* 星点缓慢漂移 */
@keyframes starDrift {
    from { transform: translateY(-10px) translateX(-5px); }
    to   { transform: translateY(15px) translateX(8px); }
}

/* ===== 光线穿透效果（通过body额外伪元素实现） ===== */
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 30deg,
            rgba(255, 248, 230, 0.06) 32deg,
            rgba(255, 240, 210, 0.1) 35deg,
            rgba(255, 235, 200, 0.06) 38deg,
            transparent 42deg,
            transparent 70deg,
            rgba(255, 248, 230, 0.04) 73deg,
            rgba(255, 240, 210, 0.07) 76deg,
            rgba(255, 235, 200, 0.04) 79deg,
            transparent 82deg,
            transparent 110deg,
            rgba(232, 201, 107, 0.03) 115deg,
            rgba(212, 168, 67, 0.05) 118deg,
            rgba(232, 201, 107, 0.03) 121deg,
            transparent 125deg,
            transparent 360deg
        );
    animation: lightRaySweep 18s ease-in-out infinite alternate;
}

@keyframes lightRaySweep {
    0%   { opacity: 0.6; transform: rotate(-2deg) translateY(0); }
    33%  { opacity: 1; transform: rotate(1.5deg) translateY(-15px); }
    66%  { opacity: 0.7; transform: rotate(-1deg) translateY(8px); }
    100% { opacity: 0.95; transform: rotate(2deg) translateY(-5px); }
}

/* ===== 漂浮宝石碎片 ===== */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* 大碎片1 - 左上 */
        linear-gradient(135deg, transparent 48%, rgba(212,168,67,0.07) 49%, rgba(232,201,107,0.09) 50%, rgba(212,168,67,0.07) 51%, transparent 52%),
        /* 大碎片2 - 右侧 */
        linear-gradient(225deg, transparent 46%, rgba(201,160,48,0.06) 47.5%, rgba(212,168,67,0.08) 50%, rgba(201,160,48,0.06) 52.5%, transparent 54%),
        /* 小碎片3 - 中下 */
        linear-gradient(60deg, transparent 49.5%, rgba(232,201,107,0.05) 50%, rgba(212,168,67,0.06) 50.5%, transparent 51%);
    background-size: 280px 220px, 240px 260px, 180px 150px;
    background-position: 3% 6%, 92% 25%, 55% 85%;
    animation: shardFloat 22s ease-in-out infinite alternate;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes shardFloat {
    0%   { opacity: 0.4; transform: translate(0, 0) rotate(0deg); }
    40%  { opacity: 0.9; transform: translate(12px, -18px) rotate(1.5deg); }
    70%  { opacity: 0.5; transform: translate(-8px, 10px) rotate(-0.8deg); }
    100% { opacity: 0.8; transform: translate(6px, -6px) rotate(1deg); }
}

.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);
}

/* ===== 对角扫光动画 (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, 168, 67, 0.22),
        0 0 36px rgba(212, 168, 67, 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 #D4A843;
    animation: petalBurstExpand 0.6s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes petalBurstExpand {
    0% { box-shadow: 0 0 0 0 rgba(212,168,67,0.5); opacity: 1; }
    100% { box-shadow: 0 0 0 35px rgba(212,168,67,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, 168, 67, 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, 168, 67, 0.28);
    background: rgba(212, 168, 67, 0.08);
}
.gem-btn-outline:active {
    background: linear-gradient(135deg, #D4A843, #E8C96B);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.35);
    transform: scale(0.98);
}

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

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

a {
    transition: all 0.3s ease;
}

::selection {
    background: rgba(212, 168, 67, 0.3);
    color: #8B6914;
}

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

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

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

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