/* ===== Developers Page Styles ===== */
/* Auto-extracted from src/developers.html */

/* Section Standards */
    .section {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
      position: relative;
      overflow: hidden;
    }

    /* 1. Hero Section - Joyful Game Wall */
    .hero {
      height: 100vh;
      position: relative;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }
    .game-wall {
      position: absolute;
      top: -30%; left: -25%; width: 150%; height: 160%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 40px;
      transform: rotate(-15deg);
      opacity: 0.65;
      pointer-events: none;
    }
    .game-row {
      display: flex;
      gap: 40px;
      width: max-content;
      will-change: transform;
    }
    .game-row:nth-child(1) { animation: scrollWall 35s linear infinite; }
    .game-row:nth-child(2) { animation: scrollWall 45s linear reverse infinite; }
    .game-row:nth-child(3) { animation: scrollWall 38s linear infinite; }
    .game-row:nth-child(4) { animation: scrollWall 50s linear reverse infinite; }
    .game-row:nth-child(5) { animation: scrollWall 42s linear infinite; }
    .game-row:nth-child(6) { animation: scrollWall 48s linear reverse infinite; }
    
    .game-item {
      width: 380px;
      height: 220px;
      background-size: cover;
      background-position: center;
      border-radius: 22px;
      flex-shrink: 0;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.12);
      transform: translateZ(0);
    }
    
    @keyframes scrollWall {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .hero-overlay {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, rgba(0, 102, 255, 0.35) 0%, rgba(157, 0, 255, 0.35) 50%, rgba(255, 0, 122, 0.35) 100%);
      z-index: 2;
      mix-blend-mode: overlay;
    }
    .hero-darken {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(circle at center, transparent 10%, rgba(0,0,0,0.85) 100%);
      z-index: 3;
    }
    .hero-content { position: relative; z-index: 10; color: white; margin-top: 60px; }
    .hero-br { display: none; } /* 默认不换行，PC端保持一行 */
    .hero h1 { 
      font-size: 4.2rem; font-weight: 950; margin-bottom: 24px; line-height: 1.1; 
      letter-spacing: -2px;
      background: linear-gradient(to bottom, #fff 0%, #aaa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
    }
    .hero .subtitle { 
      font-size: 1.25rem; color: #ffffff !important; font-weight: 400; max-width: 900px; 
      margin: 0 auto 40px;
      background: rgba(0,0,0,0.5);
      padding: 15px 30px;
      border-radius: 15px;
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .btn-joy {
      background: linear-gradient(45deg, #00D4AA, #0066ff, #9d00ff);
      background-size: 200% auto;
      border: none;
      padding: 22px 55px;
      font-size: 1.5rem;
      border-radius: 60px;
      box-shadow: 0 15px 45px rgba(0, 102, 255, 0.5);
      animation: gradientMove 3s infinite;
      color: #fff;
      font-weight: 900;
      text-decoration: none;
      display: inline-block;
      transition: 0.3s;
    }
    .btn-joy:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 55px rgba(0, 102, 255, 0.7); }

    /* 2. Market Opportunity - Luxury Interior */
    .market-section {
      background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://sc02.alicdn.com/kf/A86133b68885b4c079910cb1019c0f2a5O.png');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    .market-section .section-header h2 { font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; color: #fff; }
    .market-subtitle {
      font-size: 1.35rem; font-weight: 400; color: #ffffff !important; opacity: 1; max-width: 900px; margin: 20px auto 0;
      line-height: 1.7;
      text-shadow: 0 2px 15px rgba(0,0,0,0.8);
    }
    .opportunity-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 80px;
    }
    .opp-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 60px 40px;
      border-radius: 40px;
      backdrop-filter: blur(25px);
      text-align: center;
      transition: 0.5s;
    }
    .opp-card:hover { transform: translateY(-15px); background: rgba(255,255,255,0.08); border-color: #00D4AA; }
    .opp-card h4 { color: #fff; font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; }
    .opp-card p { color: rgba(255,255,255,0.7); line-height: 1.6; font-size: 1.1rem; }
    .opp-number { 
      font-size: 4.5rem; font-weight: 900; color: #00D4AA; margin-bottom: 15px; 
      text-shadow: 0 0 35px rgba(0,212,170,0.6);
    }

    /* 3. Modes - 50/50 Full Width Split */
    .mode-section {
      padding: 0 !important;
      min-height: 100vh;
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .aaa-section { background: #f8f9fa; } /* 浅灰色背景 */
    .indie-section { background: #f0f2f5; } /* 稍微深一点的浅灰色 */

    .mode-container-split { 
      display: flex; 
      width: 100%; 
      height: 100vh; 
      align-items: stretch;
    }
    .mode-content { 
      width: 50vw;
      flex: 0 0 50vw; 
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 8%;
    }
    .mode-visual-box { 
      width: 50vw;
      flex: 0 0 50vw; 
      height: 100vh; 
      position: relative; 
      overflow: hidden; 
    }
    .mode-tag-lg {
      font-size: 1.55rem;
      padding: 14px 40px;
      margin-bottom: 36px;
      display: inline-block;
      border-radius: 50px;
      font-weight: 900;
      letter-spacing: 3px;
      text-transform: uppercase;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      text-align: center;
      min-width: 380px;
    }
    .mode-content h2 { font-size: 2.8rem; margin-bottom: 36px; line-height: 1.3; font-weight: 800; color: #000; }
    html.lang-en .mode-content h2 { font-size: 2.2rem; }
    html.lang-en .mode-tag-lg { font-size: 1.15rem; padding: 12px 32px; min-width: 340px; }
    .mode-list-sm { list-style: none; padding: 0; }
    .mode-list-sm li { margin-bottom: 36px; }
    .mode-list-sm li strong { display: block; font-size: 1.35rem; color: #111; margin-bottom: 12px; }
    .mode-list-sm li span { display: block; font-size: 1.05rem; color: #555; line-height: 1.7; }
    html.lang-en .mode-list-sm li strong { font-size: 1.2rem; }

    .slider-inner { display: flex; width: 300%; height: 100%; animation: modeSlider 18s infinite; }
    .slider-img { width: 33.333%; height: 100%; background-size: cover; background-position: center; }
    @keyframes modeSlider {
      0%, 25% { transform: translateX(0); }
      33%, 58% { transform: translateX(-33.333%); }
      66%, 91% { transform: translateX(-66.666%); }
      100% { transform: translateX(0); }
    }
    .slider-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
      z-index: 2;
    }
    .steam-badge {
      position: absolute;
      top: 50px; left: 50px;
      background: rgba(0,212,170,0.25);
      border: 2px solid #00D4AA;
      color: #00D4AA;
      padding: 14px 30px;
      border-radius: 60px;
      font-weight: 900;
      backdrop-filter: blur(15px);
      z-index: 10;
      letter-spacing: 1px;
    }

    /* Responsive */
    @media (min-width: 1025px) {
      .indie-section .mode-container-split { flex-direction: row-reverse; }
    }
    @media (max-width: 1024px) {
      .hero h1 { font-size: 2.8rem; }
      .opportunity-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
      .mode-container-split { flex-direction: column; }
      .mode-content { width: 100%; padding: 60px 24px; }
      .mode-visual-box { width: 100%; height: 50vh; }
      .mode-tag-lg { min-width: auto; font-size: 1.2rem; padding: 10px 24px; }
    }
    @media (max-width: 768px) {
      .hero h1 { font-size: 3.5rem; }
      html.lang_en .hero h1 { font-size: 5rem; }
      .hero-br { display: block; }
      .hero .subtitle { font-size: 1.2rem; padding: 12px 20px; }
      html.lang_en .hero .subtitle { font-size: 1rem; }
      .game-wall { top: -70%; left: -150%; width: 400%; height: 220%; gap: 30px; }
      .game-item { width: 300px; height: 180px; border-radius: 20px; }
      .game-row { gap: 20px; }
      .market-section { padding: 60px 0; background-attachment: scroll; }
      .market-section .section-header h2 { font-size: 2rem; }
      .market-subtitle,
      html.lang_en .market-subtitle { font-size: 1rem; }
      .opportunity-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
      .opp-card { padding: 40px 24px; border-radius: 24px; }
      .opp-number { font-size: 3rem; }
      .mode-section { min-height: auto; }
      .mode-container-split { height: auto; }
      .mode-content h2 { font-size: 2rem; margin-bottom: 24px; }
      html.lang-en .mode-content h2 { font-size: 2rem; }
      .mode-list-sm li { margin-bottom: 28px; }
      .mode-list-sm li strong { font-size: 1.2rem; }
      .mode-list-sm li span { font-size: 1rem; }
      .steam-badge { top: 20px; left: 20px; font-size: 0.85rem; padding: 10px 20px; }
    }
    @media (max-width: 480px) {
      .hero h1 { font-size: 3rem; }
      html.lang_en .hero h1 { font-size: 2.5rem; }
      .game-item { width: 220px; height: 130px; }
      .game-wall { top: -65%; left: -150%; width: 400%; height: 220%; gap: 25px; }
      .opp-number { font-size: 2.5rem; }
      .mode-content h2 { font-size: 1.5rem; }
      html.lang-en .mode-content h2 { font-size: 1.5rem; }
      .mode-container-split { height: auto; }
    }