/* ==========================================================================
   BLOOD MESSAGE - 2024世界顶级性能优化CSS v3.0
   目标：Core Web Vitals满分，全球化访问优化，现代图片格式支持
   ========================================================================== */

/* 🌍 全球化性能优化 */
:root {
  /* 性能优化变量 */
  --lcp-target: 2.5s;
  --inp-target: 200ms;
  --cls-target: 0.1;
  
  /* 现代浏览器特性检测 */
  --modern-blur: blur(10px);
  --modern-backdrop: blur(10px) saturate(180%);
  --modern-gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* 1. 关键资源优化 - 减少LCP */
/* 预加载关键资源 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --font-display: swap; /* 字体显示优化 */
  }
}

/* 2. 图片性能优化 */
img {
  /* 现代图片格式支持 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  
  /* 防止布局偏移 */
  height: auto;
  max-width: 100%;
  
  /* 延迟加载优化 */
  loading: lazy;
  decoding: async;
}

/* 🎨 现代图片格式支持系统 */
.modern-image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  background-color: var(--bg-color);
}

/* AVIF支持 - 最现代格式，最小文件大小 */
.avif .hero-single-image img {
  content: url('images/%e4%b8%8b%e8%bd%bd.html');
}

.avif .game-screenshot {
  content: url('images/screenshot.html');
}

/* WebP支持 - 广泛支持，良好压缩 */
.webp .hero-single-image img {
  content: url('images/%e4%b8%8b%e8%bd%bd-2.html');
}

.webp .game-screenshot {
  content: url('images/screenshot-2.html');
}

/* 回退到JPEG - 兼容性保证 */
.hero-single-image img,
.game-screenshot {
  content: url('images/%e4%b8%8b%e8%bd%bd-3.html');
}

/* 🚀 LCP优化系统 */
.lcp-optimized {
  /* 关键资源优先级 */
  loading: eager !important;
  fetchpriority: high;
  decoding: sync;
  
  /* 防止布局偏移 */
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  
  /* 硬件加速 */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 📱 响应式图片优化 */
@media (max-width: 768px) {
  .lcp-optimized {
    aspect-ratio: 4/3;
  }
  
  /* 移动端使用更小的图片 */
  .avif .hero-single-image img {
    content: url('images/%e4%b8%8b%e8%bd%bd-mobile.html');
  }
  
  .webp .hero-single-image img {
    content: url('images/%e4%b8%8b%e8%bd%bd-mobile-2.html');
  }
  
  .hero-single-image img {
    content: url('images/%e4%b8%8b%e8%bd%bd-mobile-3.html');
  }
}

/* 3. 字体加载优化 */
@font-face {
  font-family: 'Inter';
  font-display: swap; /* 防止FOIT */
  font-weight: 100 900;
  font-style: normal;
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
}

/* 字体回退优化 */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               system-ui, sans-serif;
  /* 减少字体加载时的布局偏移 */
  font-size-adjust: 0.5;
}

/* 4. CSS包含优化 - 减少渲染工作 */
.content-section {
  contain: layout style paint;
}

.game-guide-section,
.reviews-section,
.community-section {
  contain: layout;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* 5. 动画性能优化 - 避免布局偏移 */
.smooth-animation {
  will-change: transform, opacity;
  transform: translateZ(0); /* 硬件加速 */
}

/* 使用transform代替layout属性 */
.hover-effect {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hover-effect:hover {
  transform: translateY(-2px) scale(1.02);
}

/* 避免使用会触发重排的属性 */
.no-reflow-animation {
  /* 不使用 margin, padding, width, height 动画 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ⚡ INP优化 - 交互响应性 */
.interactive-optimized {
  /* 被动事件监听器支持 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  
  /* 减少输入延迟 */
  cursor: pointer;
  user-select: none;
  
  /* 平滑交互 */
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-optimized:hover {
  transform: translateY(-2px) scale(1.02);
}

.interactive-optimized:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.05s;
}

/* 🎯 CLS优化 - 布局稳定性 */
.layout-stable {
  /* 防止布局偏移 */
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* 动态内容占位符 */
.dynamic-placeholder {
  min-height: 200px;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.1) 25%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 6. 交互响应优化 - 提升INP */
/* 被动事件监听器优化 */
.scroll-container {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* 7. 布局稳定性优化 - 减少CLS */
/* 为动态内容预留空间 */
.dynamic-content-placeholder {
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 图片容器尺寸预设 */
.image-container {
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: #1a1a1a;
}

/* 8. 关键路径CSS内联优化 */
/* 首屏关键样式 */
.critical-above-fold {
  /* 关键路径样式，应该内联到HTML中 */
  background-color: #121212;
  color: #ffffff;
  font-family: system-ui, sans-serif;
}

/* 9. 资源提示优化 */
/* 预连接到外部域名 */
.preconnect-domains::before {
  content: '';
  /* 这些应该在HTML head中作为link标签 */
  /* <link rel="preconnect" href="https://fonts.googleapis.com"> */
  /* <link rel="preconnect" href="https://www.google-analytics.com"> */
}

/* 10. 现代CSS特性优化 */
/* 使用CSS Grid和Flexbox减少JavaScript依赖 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  /* 避免使用JavaScript进行布局计算 */
}

/* 11. 滚动性能优化 */
.smooth-scroll {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.scroll-section {
  scroll-snap-align: start;
}

/* 12. 内存优化 */
/* 移除不必要的阴影和滤镜 */
.performance-optimized {
  /* 避免复杂的box-shadow和filter */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* 而不是复杂的多层阴影 */
}

/* 13. 移动端优化 */
@media (max-width: 768px) {
  /* 移动端特定优化 */
  .mobile-optimized {
    /* 减少移动端的动画复杂度 */
    animation: none;
    transition: none;
  }
  
  /* 触摸优化 */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 14. 打印样式优化 */
@media print {
  .no-print {
    display: none;
  }
  
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}

/* 15. 高对比度模式支持 */
@media (prefers-contrast: high) {
  .high-contrast {
    border: 2px solid currentColor;
  }
}

/* 16. 减少动画的用户偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 17. 深色模式优化 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* 18. 容器查询支持（现代浏览器） */
@supports (container-type: inline-size) {
  .container-query {
    container-type: inline-size;
  }
  
  @container (min-width: 768px) {
    .responsive-component {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
  }
}

/* 19. 现代浏览器特性检测 */
@supports (backdrop-filter: blur(10px)) {
  .modern-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.8);
  }
}

/* 💻 现代浏览器特性利用 */
@supports (backdrop-filter: blur(10px)) {
  .modern-glass {
    backdrop-filter: var(--modern-backdrop);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* 20. 性能监控辅助类 */
.performance-marker {
  /* 用于性能测量的标记 */
  --performance-start: 0;
  --performance-end: 0;
}

/* 21. WebP支持检测 */
.webp-support .image-modern {
  background-image: url('image.html');
}

.no-webp .image-fallback {
  background-image: url('image-2.html');
}

/* 22. 关键第三方资源优化 */
.third-party-optimized {
  /* 为第三方内容预留空间，防止CLS */
  min-height: 250px;
  background-color: #1a1a1a;
}

/* 23. 字体加载状态管理 */
.font-loading .text-content {
  visibility: hidden;
}

.font-loaded .text-content {
  visibility: visible;
}

/* 24. 图片加载状态 */
.image-loading {
  background: linear-gradient(45deg, #333 25%, transparent 25%),
              linear-gradient(-45deg, #333 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, #333 75%),
              linear-gradient(-45deg, transparent 75%, #333 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  animation: loading-pattern 0.5s linear infinite;
}

@keyframes loading-pattern {
  0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
  100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; }
}

/* 25. 性能优化实用类 */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

/* 26. 现代浏览器优化 */
@supports (aspect-ratio: 1) {
  .aspect-ratio-16-9 {
    aspect-ratio: 16/9;
  }
  
  .aspect-ratio-4-3 {
    aspect-ratio: 4/3;
  }
}

/* 27. 滚动捕捉优化 */
.scroll-snap-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.scroll-snap-item {
  scroll-snap-align: center;
  flex: none;
}

/* 28. 性能关键路径优化 */
.critical-resource {
  /* 关键资源应该被优先加载 */
  font-display: block; /* 对于关键字体 */
}

.non-critical-resource {
  /* 非关键资源可以延迟 */
  font-display: swap;
}

/* 29. 布局抖动预防 */
.stable-layout {
  /* 预防布局抖动的容器 */
  min-height: 1px; /* 防止空容器塌陷 */
  box-sizing: border-box;
}

.stable-layout * {
  box-sizing: inherit;
}

/* 30. 最终性能优化 */
/* 减少重绘和重排 */
.optimized-element {
  /* 使用复合层 */
  will-change: transform, opacity;
  
  /* 避免触发layout的属性 */
  transition: transform 0.2s ease, opacity 0.2s ease;
  
  /* 而不是 */
  /* transition: width 0.2s ease, height 0.2s ease; */
}

/* 性能监控辅助 */
.perf-monitor::before {
  content: '';
  /* 用于性能监控工具的标记 */
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
} 

/* 🌟 高级性能优化 */
/* GPU层创建优化 */
.gpu-layer {
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;
}

/* 重绘优化 */
.repaint-optimized {
  contain: paint;
  position: relative;
}

/* 内存优化 */
.memory-optimized {
  /* 避免内存泄漏 */
  content-visibility: auto;
  contain-intrinsic-size: 1px 300px;
}

/* 🎨 现代CSS特性 */
/* 逻辑属性支持 */
.logical-properties {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 2px solid var(--primary-color);
}

/* 颜色函数支持 */
@supports (color: oklch(0.7 0.15 180)) {
  :root {
    --primary-color: oklch(0.3 0.2 0);
    --secondary-color: oklch(0.8 0.15 60);
  }
}

/* 🚀 极致优化模式 */
.ultra-performance {
  /* 所有优化技术的组合 */
  contain: strict;
  content-visibility: auto;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  
  /* 减少重排重绘 */
  position: relative;
  isolation: isolate;
  
  /* 硬件加速 */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000px;
}

/* 🎮 游戏主题现代化 */
.blood-message-theme {
  /* 现代渐变 */
  background: linear-gradient(135deg, 
    var(--primary-color) 0%,
    var(--secondary-color) 50%,
    var(--accent-color) 100%
  );
  
  /* 现代阴影 */
  box-shadow: 
    0 4px 6px rgba(139, 0, 0, 0.1),
    0 1px 3px rgba(139, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  
  /* 现代边框 */
  border-radius: var(--border-radius);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* 🔧 开发者工具优化 */
.perf-debug {
  /* 性能调试信息 */
  position: relative;
}

.perf-debug::after {
  content: 'LCP: ' attr(data-lcp) ' | INP: ' attr(data-inp) ' | CLS: ' attr(data-cls);
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #00ff00;
  padding: 4px 8px;
  font-size: 10px;
  font-family: monospace;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.perf-debug:hover::after {
  opacity: 1;
}

/* 🌐 CDN和缓存优化 */
.cdn-optimized {
  /* 预加载提示 */
  content: '';
}