/* 背景装饰 */
  .bg-decoration {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
   transition: transform 0.1s ease-out;
  }

  .bg-decoration::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 40%);
   animation: bgFloat 20s ease-in-out infinite;
  }

  /* 鼠标跟随效果 */
  .mouse-follower {
   position: fixed;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
   transform: translate(-50%, -50%);
   transition: transform 0.1s ease-out, opacity 0.3s ease;
   mix-blend-mode: screen;
  }

  /* 视差背景层 */
  .parallax-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: -1;
  }

  .parallax-star {
   position: absolute;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
   animation: twinkle 3s ease-in-out infinite;
  }

  @keyframes twinkle {

   0%,
   100% {
    opacity: 0.3;
    transform: scale(1);
   }

   50% {
    opacity: 1;
    transform: scale(1.2);
   }
  }

  @keyframes bgFloat {

   0%,
   100% {
    transform: translate(0, 0) rotate(0deg);
   }

   33% {
    transform: translate(30px, -30px) rotate(120deg);
   }

   66% {
    transform: translate(-20px, 20px) rotate(240deg);
   }
  }


  /* 面包屑 */
  .breadcrumb {
   position: relative;
   z-index: 1;
   max-width: 1400px;
   margin: 0 auto;
   padding: 2rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.4);
  }

  .breadcrumb a {
   color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
   transition: color 0.3s;
  }

  .breadcrumb a:hover {
   color: #a855f7;
  }

  .breadcrumb .current {
   color: rgba(255, 255, 255, 0.8);
  }

  /* ========== Hero 横幅 ========== */
  .detail-hero {
   position: relative;
   z-index: 1;
   max-width: 1400px;
   margin: 1.5rem auto 0;
   padding: 0 2rem;
   display: flex;
   gap: 2.5rem;
   align-items: stretch;
  }

  .detail-hero-image {
   flex: 0 0 55%;
   border-radius: 20px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  }

  .detail-hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   aspect-ratio: 16/9;
   transition: transform 0.6s ease;
  }

  .detail-hero-image:hover img {
   transform: scale(1.03);
  }

  .detail-hero-image::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
   pointer-events: none;
  }

  .detail-hero-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 1rem;
  }

  .detail-tags {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
  }

  .detail-tag {
   padding: 0.3rem 0.8rem;
   border-radius: 20px;
   font-size: 0.72rem;
   font-weight: 600;
   background: rgba(124, 58, 237, 0.2);
   color: rgba(255, 255, 255, 0.8);
   border: 1px solid rgba(124, 58, 237, 0.3);
   text-transform: uppercase;
   letter-spacing: 0.3px;
  }

  .detail-tag.primary {
   background: linear-gradient(135deg, #7c3aed, #a855f7);
   color: #fff;
   border: none;
  }

  .detail-title {
   font-size: 2.4rem;
   font-weight: 800;
   line-height: 1.2;
       color: #fff;
  }

  .detail-subtitle {
   font-size: 0.95rem;
   color: rgba(255, 255, 255, 0.5);
  }

  .detail-rating-row {
   display: flex;
   align-items: center;
   gap: 1.5rem;
  }

  .detail-rating {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(124, 58, 237, 0.2);
   padding: 0.6rem 1.2rem;
   border-radius: 12px;
  }

  .detail-rating-score {
   font-size: 1.6rem;
   font-weight: 800;
   color: #fbbf24;
  }

  .detail-rating-stars {
   color: #fbbf24;
   font-size: 0.9rem;
  }

  .detail-rating-count {
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.4);
  }

  .detail-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.2rem;
  }

  .detail-stat-value {
   font-size: 1.1rem;
   font-weight: 700;
  }

  .detail-stat-label {
   font-size: 0.7rem;
   color: rgba(255, 255, 255, 0.4);
  }

  .detail-desc {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.6);
   line-height: 1.7;
  }

  .detail-actions {
   display: flex;
   gap: 1rem;
   margin-top: 0.5rem;
  }

  .btn-play {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.9rem 2.5rem;
   background: linear-gradient(135deg, #7c3aed, #a855f7);
   border: none;
   border-radius: 30px;
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
  }

  .btn-play:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 30px rgba(124, 58, 237, 0.6);
  }

  .btn-play svg {
   width: 20px;
   height: 20px;
   fill: #fff;
  }

  .btn-secondary {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.9rem 2rem;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(124, 58, 237, 0.3);
   border-radius: 30px;
   color: #fff;
   font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
  }

  .btn-secondary:hover {
   background: rgba(124, 58, 237, 0.15);
   border-color: rgba(124, 58, 237, 0.5);
   transform: translateY(-2px);
  }

  /* ========== 推荐游戏 - 奇特卡片 ========== */
  .detail-body {
   position: relative;
   z-index: 1;
   max-width: 1400px;
   margin: 3rem auto 0;
   padding: 0 2rem;
  }

  .recommend-section {
   margin-bottom: 2rem;
  }

  .recommend-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 2rem;
  }

  .recommend-title {
   font-size: 1.6rem;
   font-weight: 800;
  }

  .recommend-badge {
   padding: 0.3rem 0.9rem;
   border-radius: 20px;
   font-size: 0.7rem;
   font-weight: 700;
   background: linear-gradient(135deg, #7c3aed, #a855f7);
   color: #fff;
   letter-spacing: 0.5px;
   text-transform: uppercase;
  }

  .recommend-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
  }

  .recommend-card {
   position: relative;
   border-radius: 20px;
   overflow: visible;
   cursor: pointer;
   transform-style: preserve-3d;
   perspective: 800px;
   transition: transform 0.15s ease-out;
   will-change: transform;
  }

  .recommend-card-inner {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(124, 58, 237, 0.15);
   transition: border-color 0.4s ease, box-shadow 0.4s ease;
  }

  .recommend-card:hover .recommend-card-inner {
   border-color: transparent;
   box-shadow: 0 0 30px rgba(124, 58, 237, 0.3), 0 0 60px rgba(168, 85, 247, 0.15);
  }

  /* 全息渐变边框 */
  .recommend-card::before {
   content: '';
   position: absolute;
   inset: -2px;
   border-radius: 22px;
   background: conic-gradient(from var(--rec-angle, 0deg), #7c3aed 0%, #a855f7 15%, #6366f1 30%, #06b6d4 45%, #a855f7 60%, #ec4899 75%, #7c3aed 90%, #a855f7 100%);
   z-index: -1;
   opacity: 0;
   transition: opacity 0.4s ease;
   animation: recRotate 4s linear infinite;
  }

  .recommend-card:hover::before {
   opacity: 1;
  }

  @property --rec-angle {
   syntax: '<angle>';
   initial-value: 0deg;
   inherits: false;
  }

  @keyframes recRotate {
   to {
    --rec-angle: 360deg;
   }
  }

  /* 光泽扫过 */
  .recommend-card-shine {
   position: absolute;
   top: 0;
   left: -100%;
   width: 60%;
   height: 100%;
   background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 60%, transparent 80%);
   z-index: 5;
   pointer-events: none;
   border-radius: 20px;
  }

  .recommend-card:hover .recommend-card-shine {
   animation: recShine 0.8s ease forwards;
  }

  @keyframes recShine {
   0% {
    left: -100%;
   }

   100% {
    left: 150%;
   }
  }

  .recommend-card-rank {
   position: absolute;
   top: -8px;
   left: 16px;
   z-index: 10;
   font-size: 0.8rem;
   font-weight: 800;
   padding: 0.3rem 0.7rem;
   border-radius: 8px;
   background: linear-gradient(135deg, #f59e0b, #d97706);
   color: #fff;
   box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  }

  .recommend-card-image {
   aspect-ratio: 16/10;
   overflow: hidden;
  }

  .recommend-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
  }

  .recommend-card:hover .recommend-card-image img {
   transform: scale(1.1);
  }

  .recommend-card-body {
   padding: 1rem 1.2rem 1.2rem;
  }

  .recommend-card-tags {
   display: flex;
   gap: 0.4rem;
   margin-bottom: 0.5rem;
  }

  .recommend-card-tags span {
   font-size: 0.65rem;
   padding: 0.15rem 0.5rem;
   border-radius: 12px;
   background: rgba(124, 58, 237, 0.2);
   color: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(124, 58, 237, 0.25);
  }

  .recommend-card-name {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 0.3rem;
  }

  .recommend-card-desc {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.4;
   margin-bottom: 0.8rem;
  }

  .recommend-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
  }

  .recommend-card-rating {
   font-size: 0.85rem;
   color: #fbbf24;
   font-weight: 600;
  }

  .recommend-card-btn {
   padding: 0.4rem 1rem;
   border-radius: 20px;
   font-size: 0.78rem;
   font-weight: 600;
   background: linear-gradient(135deg, #7c3aed, #a855f7);
   color: #fff;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
  }

  .recommend-card-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(124, 58, 237, 0.5);
  }

  /* 页脚 */
  .footer {
   background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
   border-top: 1px solid rgba(124, 58, 237, 0.2);
   padding: 3rem 2rem;
   margin-top: 4rem;
   position: relative;
   z-index: 1;
  }

  .footer-content {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
  }

  .footer-links {
   display: flex;
   gap: 2rem;
  }

  .footer-links a {
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   font-size: 0.9rem;
   transition: color 0.3s ease;
  }

  .footer-links a:hover {
   color: #a855f7;
  }

  .social-links {
   display: flex;
   gap: 1rem;
  }

  .social-links a {
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(124, 58, 237, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   transition: all 0.3s ease;
  }

  .social-links a:hover {
   background: linear-gradient(135deg, #7c3aed, #a855f7);
   border-color: transparent;
   color: #fff;
   transform: translateY(-3px);
  }


  @keyframes scrollPulse {

   0%,
   100% {
    transform: scale(1);
    opacity: 0.6;
   }

   50% {
    transform: scale(1.3);
    opacity: 0;
   }
  }

  /* 滚动入场 */
  .reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.revealed {
   opacity: 1;
   transform: translateY(0);
  }

  /* 响应式 */
  @media (max-width: 1100px) {
   .recommend-grid {
    grid-template-columns: repeat(3, 1fr);
   }
  }

  @media (max-width: 900px) {
   .detail-hero {
    flex-direction: column;
   }

   .detail-hero-image {
    flex: none;
   }

   .detail-title {
    font-size: 1.8rem;
   }

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

  @media (max-width: 600px) {
   .navbar {
    padding: 1rem;
   }

  

   .search-box input {
    width: 180px;
   }

   .detail-hero {
    padding: 0 1rem;
   }

   .detail-body {
    padding: 0 1rem;
   }


   .detail-title {
    font-size: 1.5rem;
   }

   .detail-actions {
    flex-direction: column;
   }

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

   .footer-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
   }
  }