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

html {
    background-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: transparent;
    color: #3B4252;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
}

/* ===== 拼图·彩玻马赛克 - 动态彩玻光斑矩阵 ===== */
.stained-glass-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #FFFBF5;
  overflow: hidden;
}

/* 彩色菱形光斑旋转层 */
.stained-glass-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 180, 180, 0.3) 0deg 15deg,
      rgba(255, 220, 170, 0.3) 15deg 30deg,
      rgba(255, 255, 180, 0.3) 30deg 45deg,
      rgba(180, 230, 180, 0.3) 45deg 60deg,
      rgba(180, 210, 255, 0.3) 60deg 75deg,
      rgba(220, 180, 255, 0.3) 75deg 90deg,
      rgba(255, 180, 180, 0.3) 90deg 105deg,
      rgba(255, 220, 170, 0.3) 105deg 120deg,
      rgba(255, 255, 180, 0.3) 120deg 135deg,
      rgba(180, 230, 180, 0.3) 135deg 150deg,
      rgba(180, 210, 255, 0.3) 150deg 165deg,
      rgba(220, 180, 255, 0.3) 165deg 180deg
    );
  background-size: 200px 200px;
  animation: prismRotate 30s linear infinite;
  opacity: 0.8;
}

/* 对角线流动光河 */
.stained-glass-bg::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255, 200, 180, 0.4) 40%,
    rgba(255, 230, 150, 0.3) 50%,
    rgba(180, 220, 240, 0.4) 60%,
    transparent 70%
  );
  filter: blur(80px);
  animation: diagonalSweep 18s ease-in-out infinite;
}

/* 漂浮彩点 */
.stained-glass-bg .color-sparks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,150,150,0.6) 2px, transparent 3px),
    radial-gradient(circle at 90% 25%, rgba(255,200,100,0.7) 3px, transparent 4px),
    radial-gradient(circle at 50% 10%, rgba(150,200,255,0.6) 2px, transparent 3px),
    radial-gradient(circle at 30% 85%, rgba(180,255,180,0.5) 3px, transparent 4px),
    radial-gradient(circle at 80% 70%, rgba(220,150,255,0.6) 2px, transparent 3px),
    radial-gradient(circle at 60% 40%, rgba(255,255,150,0.5) 3px, transparent 4px);
  animation: sparkFloat 6s ease-in-out infinite;
}

.stained-glass-bg .color-sparks::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 40% 20%, rgba(255,180,200,0.5) 1px, transparent 2px),
    radial-gradient(circle at 70% 50%, rgba(180,220,255,0.7) 2px, transparent 3px),
    radial-gradient(circle at 20% 60%, rgba(255,220,180,0.6) 3px, transparent 4px),
    radial-gradient(circle at 85% 15%, rgba(200,255,200,0.5) 2px, transparent 3px);
  animation: sparkFloat 8s ease-in-out infinite reverse;
}

@keyframes prismRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes diagonalSweep {
  0%, 100% { transform: translate(-15%, -15%); }
  50% { transform: translate(15%, 15%); }
}

@keyframes sparkFloat {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-12px); opacity: 0.8; }
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 10px;
}

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

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

/* ===== 拼图·彩玻马赛克 - 彩色渐变描边卡片（24px圆角+旋转描边+抖动动画）===== */
.game-card {
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background-clip: padding-box;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: cardShimmer 8s ease-in-out infinite, cardJitter 6s ease-in-out infinite;
    cursor: pointer;
}

/* 彩虹渐变描边 */
.game-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(
        var(--border-angle, 0deg),
        rgba(255, 68, 68, 0.6),
        rgba(255, 165, 0, 0.6),
        rgba(255, 255, 68, 0.6),
        rgba(68, 255, 68, 0.6),
        rgba(68, 170, 255, 0.6),
        rgba(170, 68, 255, 0.6),
        rgba(255, 68, 68, 0.6)
    );
    z-index: -1;
    animation: borderRotate 8s linear infinite;
}

/* 同色系扩散光阴影 */
.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow:
        0 4px 20px rgba(255, 180, 180, 0.25),
        0 8px 40px rgba(180, 210, 245, 0.15);
    pointer-events: none;
    z-index: -1;
    animation: shadowColorShift 8s ease-in-out infinite;
}

@keyframes borderRotate {
    0% { --border-angle: 0deg; }
    100% { --border-angle: 360deg; }
}

@keyframes cardShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

@keyframes cardJitter {
    0%, 100% { transform: translate(0, 0); }
    12% { transform: translate(-1px, 1px); }
    24% { transform: translate(1px, -1px); }
    36% { transform: translate(-1px, -1px); }
    48% { transform: translate(1px, 1px); }
    60% { transform: translate(0, 0); }
}

@keyframes shadowColorShift {
    0%, 100% {
        box-shadow:
            0 4px 20px rgba(255, 180, 180, 0.25),
            0 8px 40px rgba(180, 210, 245, 0.15);
    }
    33% {
        box-shadow:
            0 4px 20px rgba(220, 190, 240, 0.25),
            0 8px 40px rgba(180, 220, 200, 0.15);
    }
    66% {
        box-shadow:
            0 4px 20px rgba(180, 220, 200, 0.25),
            0 8px 40px rgba(255, 200, 180, 0.15);
    }
}

.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(180,190,210,0.45);
    animation-play-state: paused !important;
}

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

/* 触摸反馈 - 描边加速旋转+扩散光晕+彩光扫过 */
.game-card:active {
    animation: cardGlowBurst 0.6s ease-out;
    transform: translateY(-5px);
}

.game-card:active::before {
    animation: borderRotateFast 0.6s linear;
}

@keyframes cardGlowBurst {
    0% { box-shadow: 0 4px 20px rgba(255, 180, 180, 0.25), 0 8px 40px rgba(180, 210, 245, 0.15); }
    30% { box-shadow: 0 10px 30px rgba(255, 100, 100, 0.5), 0 15px 50px rgba(100, 150, 255, 0.4); transform: translateY(-5px) scale(1.01); }
    60% { box-shadow: 0 8px 35px rgba(255, 150, 150, 0.4), 0 12px 45px rgba(130, 170, 255, 0.35); transform: translateY(-3px) scale(1.005); }
    100% { box-shadow: 0 4px 20px rgba(255, 180, 180, 0.25), 0 8px 40px rgba(180, 210, 245, 0.15); transform: translateY(0); }
}

@keyframes borderRotateFast {
    0% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(60deg) brightness(1.3); }
    100% { filter: hue-rotate(120deg) brightness(1); }
}

hr, .divider {
    display: none;
}

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

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

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

/* ===== 拼图·彩玻马赛克 - 相关游戏卡片 ===== */
.related-game {
    transition: all 0.3s ease;
    border-radius: 24px;
    background: #FFFFFF;
    border: 2px solid transparent;
    position: relative;
    background-clip: padding-box;
    overflow: hidden;
}

/* 彩虹渐变描边 */
.related-game::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(
        var(--border-angle, 0deg),
        rgba(255, 68, 68, 0.6),
        rgba(255, 165, 0, 0.6),
        rgba(255, 255, 68, 0.6),
        rgba(68, 255, 68, 0.6),
        rgba(68, 170, 255, 0.6),
        rgba(170, 68, 255, 0.6),
        rgba(255, 68, 68, 0.6)
    );
    z-index: -1;
    animation: borderRotate 8s linear infinite;
}

/* 同色系扩散光阴影 */
.related-game::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow:
        0 4px 20px rgba(255, 180, 180, 0.25),
        0 8px 40px rgba(180, 210, 245, 0.15);
    pointer-events: none;
    z-index: -1;
}

.related-game:hover {
    transform: translateY(-5px);
    box-shadow:
        8px 8px 0 rgba(255, 200, 200, 0.20),
        12px 12px 0 rgba(180, 210, 245, 0.15),
        0 16px 40px rgba(180,190,210,0.3);
}

/* ===== 拼图·彩玻马赛克 - 游戏卡片内部结构样式 ===== */
.game-card-link {
    text-decoration: none;
    color: #2A2A2A;
    display: block;
    position: relative;
    z-index: 1;
}

.game-card-image-wrapper {
    position: relative;
    overflow: hidden;
    margin: 1px;
    border-radius: 22px 22px 0 0;
}

.game-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 22px 22px 0 0;
    transition: transform 0.3s ease;
}

.game-card-content {
    padding: 12px 8px 16px;
    text-align: center;
}

.game-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
    color: #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 彩色小方形前缀 */
.color-prefix {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0;
    animation: prefixPulse 3s ease-in-out infinite;
}

@keyframes prefixPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* ===== 拼图·彩玻马赛克 - 相关游戏卡片内部结构样式 ===== */
.related-game-link {
    text-decoration: none;
    color: #2A2A2A;
    display: block;
    position: relative;
    z-index: 1;
}

.related-game-image-wrapper {
    position: relative;
    overflow: hidden;
}

.related-game-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 22px 22px 0 0;
    transition: transform 0.3s ease;
}

.related-game-content {
    padding: 10px;
    text-align: center;
}

.related-game-title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #2A2A2A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ===== 拼图·彩玻马赛克 - 透明底彩色渐变文字按钮 ===== */
.play-button {
    background: transparent;
    border: 2px solid transparent;
    padding: 18px 60px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    background-clip: padding-box;
    transition: all 0.3s ease;
    color: transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #FF6B6B, #FFA94D, #FFE066, #69DB7C, #74C0FC, #B197FC) border-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: 0 4px 20px rgba(180,195,220,0.28);
}

.play-button::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    background: linear-gradient(
        var(--btn-border-angle, 0deg),
        rgba(255, 107, 107, 0.6),
        rgba(255, 169, 77, 0.6),
        rgba(255, 224, 102, 0.6),
        rgba(105, 219, 124, 0.6),
        rgba(116, 192, 252, 0.6),
        rgba(177, 151, 252, 0.6),
        rgba(255, 107, 107, 0.6)
    );
    z-index: -1;
    animation: btnBorderRotate 6s linear infinite;
}

@keyframes btnBorderRotate {
    0% { --btn-border-angle: 0deg; }
    100% { --btn-border-angle: 360deg; }
}

.play-button:hover {
    transform: scale(1.05);
    box-shadow:
        0 12px 40px rgba(180, 195, 220, 0.6),
        0 0 30px rgba(255, 169, 77, 0.3);
    background: linear-gradient(
        rgba(255, 107, 107, 0.08),
        rgba(177, 151, 252, 0.08)
    ), linear-gradient(135deg, #FF6B6B, #FFA94D, #FFE066, #69DB7C, #74C0FC, #B197FC);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

button {
    transition: all 0.3s ease;
}

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

a {
    transition: all 0.3s ease;
}

::selection {
    background: rgba(200, 215, 235, 0.5);
    color: #3B4252;
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #C8D0DA, #B0BCD0);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #A8B4C8, #98A8C0);
}