/* ── brand palette ── */
    :root{
      --brand:#ff3b82;
      --brand-dark:#e91e63;
      --brand-light:#ff6ba8;
      --bg:#0a0a0f;
      --bg-secondary:#13121a;
      --text:#ffffff;
      --text-muted:rgba(255,255,255,.7);
      --text-dim:rgba(255,255,255,.5);
      --card-bg:rgba(255,255,255,.08);
      --card-border:rgba(255,255,255,.15);
      --brand-20:rgba(255,59,130,.2);
      --brand-30:rgba(255,59,130,.3);
      --brand-40:rgba(255,59,130,.4);
      --glow-primary:rgba(255,59,130,.6);
      --gradient-1:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --gradient-2:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      --gradient-3:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    /* ── modern reset ── */
    :where(*,::before,::after){margin:0;padding:0;box-sizing:border-box}
    
    /* ── smooth scrolling ── */
    html{scroll-behavior:smooth}
    
    body{
      font-family:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      overflow-x:hidden;
      position:relative;
    }
    
    /* ── animated background ── */
    body::before{
      content:'';
      position:fixed;
      top:0;left:0;right:0;bottom:0;
      background:
        radial-gradient(circle at 20% 50%, rgba(255,59,130,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(103,126,234,0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(240,147,251,0.1) 0%, transparent 50%);
      z-index:-1;
      animation:bgFloat 20s ease-in-out infinite;
    }
    
    @keyframes bgFloat{
      0%, 100%{transform:scale(1) rotate(0deg)}
      50%{transform:scale(1.1) rotate(5deg)}
    }
    
    /* ── header ── */
    .header{
      background:rgba(19,18,26,.85);
      backdrop-filter:blur(20px);
      padding:16px 0;
      position:sticky;top:0;z-index:999;
      border-bottom:1px solid var(--card-border);
      box-shadow:0 4px 30px rgba(0,0,0,.3);
    }
    
    .header-container{
      max-width:1400px;margin:auto;padding:0 20px;
      display:flex;justify-content:space-between;align-items:center;gap:20px
    }
    
    /* استبدل CSS الخاص بـ .logo بهذا الكود */
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:28px;
  font-weight:800;
  background:linear-gradient(45deg, var(--brand), var(--brand-light));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-decoration:none;
  transition:all 0.3s ease;
}

.logo:hover{
  transform:scale(1.05);
  filter:drop-shadow(0 0 10px var(--glow-primary));
}

/* استبدل .logo-icon بهذا */
.logo img{
  width:40px;
  height:40px;
  border-radius:8px;
  object-fit:contain;
  background:rgba(255,255,255,0.1);
  padding:4px;
  box-shadow:0 4px 15px rgba(255,59,130,.3);
  transition:transform 0.3s ease;
}

.logo:hover img{
  transform:scale(1.1);
}

/* أو إذا كنت تريد إزالة الصورة تماماً واستخدام أيقونة CSS */
.logo-icon-css{
  width:32px;
  height:32px;
  background:var(--gradient-2);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 15px rgba(255,59,130,.3);
  font-size:18px;
  color:white;
}

.logo-icon-css::before{
  content:"🎮";
}
    
    .search-container{
      flex:1;max-width:500px;position:relative;
    }
    
    .search-input{
      width:100%;padding:14px 20px 14px 50px;
      background:rgba(255,255,255,.08);
      border:2px solid transparent;
      border-radius:25px;
      color:var(--text);
      font-size:16px;
      outline:none;
      transition:all 0.3s ease;
      backdrop-filter:blur(10px);
    }
    
    .search-input::placeholder{color:var(--text-dim)}
    
    .search-input:focus{
      border-color:var(--brand);
      background:rgba(255,255,255,.12);
      box-shadow:0 0 25px var(--brand-30), inset 0 0 20px rgba(255,255,255,.05);
      transform:translateY(-2px);
    }
    
    .search-icon{
      position:absolute;left:18px;top:50%;
      transform:translateY(-50%);
      width:20px;height:20px;
      opacity:.6;
      pointer-events:none;
    }
    
    /* ── layout ── */
    .container{
      max-width:1400px;margin:auto;padding:40px 20px;
    }
    
    .hero-section{
      text-align:center;padding:60px 0;margin-bottom:40px;
      position:relative;
    }
    
    .hero-title{
      font-size:clamp(2.5rem, 5vw, 4rem);
      font-weight:900;
      background:linear-gradient(45deg, var(--brand), var(--brand-light), #fff);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      margin-bottom:20px;
      animation:fadeInUp 1s ease;
    }
    
    .hero-subtitle{
      font-size:1.2rem;
      color:var(--text-muted);
      margin-bottom:30px;
      animation:fadeInUp 1s ease 0.2s both;
    }
    
    @keyframes fadeInUp{
      from{opacity:0; transform:translateY(30px)}
      to{opacity:1; transform:translateY(0)}
    }
    
    .section-title{
      font-size:2.5rem;
      font-weight:800;
      background:linear-gradient(45deg, var(--brand), var(--brand-light));
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      margin-bottom:40px;
      text-align:center;
      position:relative;
    }
    
    .section-title::after{
      content:'';
      position:absolute;
      bottom:-10px;left:50%;
      transform:translateX(-50%);
      width:100px;height:3px;
      background:var(--gradient-2);
      border-radius:2px;
    }
    
    .games-grid{
      display:grid;
      gap:30px;
      margin-bottom:60px;
    }
    
    @media(min-width:1200px){.games-grid{grid-template-columns:repeat(4,1fr)}}
    @media(min-width:900px) and (max-width:1199px){.games-grid{grid-template-columns:repeat(3,1fr)}}
    @media(min-width:600px) and (max-width:899px){.games-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:599px){.games-grid{grid-template-columns:1fr}}
    
    /* ── modern card design ── */
    .game-card{
      background:var(--card-bg);
      border:1px solid var(--card-border);
      border-radius:20px;
      padding:24px;
      transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative;
      overflow:hidden;
      backdrop-filter:blur(20px);
      cursor:pointer;
    }
    
    .game-card::before{
      content:'';
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      background:linear-gradient(135deg, 
        rgba(255,255,255,.1) 0%, 
        rgba(255,255,255,.05) 50%, 
        transparent 100%);
      opacity:0;
      transition:opacity 0.3s ease;
      pointer-events:none;
    }
    
    .game-card:hover{
      transform:translateY(-8px) scale(1.02);
      box-shadow:
        0 20px 40px rgba(0,0,0,.3),
        0 0 30px var(--brand-30),
        inset 0 1px 0 rgba(255,255,255,.2);
      border-color:var(--brand);
    }
    
    .game-card:hover::before{opacity:1}
    
    .game-header{
      display:flex;
      align-items:center;
      gap:16px;
      margin-bottom:20px;
    }
    
    .game-cover{
      width:64px;height:64px;
      border-radius:16px;
      overflow:hidden;
      flex-shrink:0;
      position:relative;
      box-shadow:0 8px 20px rgba(0,0,0,.3);
    }
    
    .game-cover::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, transparent 0%, rgba(255,59,130,.2) 100%);
      opacity:0;
      transition:opacity 0.3s ease;
    }
    
    .game-card:hover .game-cover::after{opacity:1}
    
    .game-cover-img{
      width:100%;height:100%;
      object-fit:cover;
      transition:transform 0.3s ease;
    }
    
    .game-card:hover .game-cover-img{transform:scale(1.1)}
    
    .game-info{flex:1}
    
    .game-title{
      font-size:1.25rem;
      font-weight:700;
      margin-bottom:6px;
      color:var(--text);
    }
    
    .game-meta{
      font-size:0.9rem;
      color:var(--text-muted);
      font-weight:500;
    }
    
    .platform-badges{
      display:flex;
      gap:8px;
      margin-bottom:20px;
      flex-wrap:wrap;
    }
    
    .platform-badge{
      background:rgba(255,255,255,.1);
      color:var(--text);
      padding:6px 12px;
      border-radius:20px;
      font-size:0.8rem;
      font-weight:600;
      display:flex;
      align-items:center;
      gap:6px;
      border:1px solid rgba(255,255,255,.2);
      transition:all 0.3s ease;
      backdrop-filter:blur(10px);
    }
    
    .platform-badge:hover{
      background:var(--brand-20);
      border-color:var(--brand);
      transform:translateY(-2px);
    }
    
    .platform-icon{
      width:14px;height:14px;
      fill:currentColor;
    }
    
    .download-btn{
      width:100%;
      background:var(--gradient-2);
      color:#fff;
      border:none;
      padding:14px 24px;
      border-radius:25px;
      font-size:1rem;
      font-weight:700;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      transition:all 0.3s ease;
      box-shadow:0 6px 20px rgba(255,59,130,.3);
      text-transform:uppercase;
      letter-spacing:0.5px;
    }
    
    .download-btn::before{
      content:'';
      position:absolute;
      top:0;left:-100%;
      width:100%;height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
      transition:left 0.5s ease;
    }
    
    .download-btn:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 30px rgba(255,59,130,.5);
      filter:brightness(1.1);
    }
    
    .download-btn:hover::before{left:100%}
    
    .download-btn:active{
      transform:translateY(-1px);
      box-shadow:0 5px 15px rgba(255,59,130,.4);
    }
    
    .download-btn.loading{
      opacity:.7;
      pointer-events:none;
      animation:pulse 2s infinite;
    }
    .file-item.failed{
  color:#ff6b6b;
}
    @keyframes pulse{
      0%, 100%{transform:scale(1)}
      50%{transform:scale(1.05)}
    }
    
    /* ── footer ── */
    .footer{
      background:rgba(19,18,26,.9);
      border-top:1px solid var(--card-border);
      padding:40px 0;
      text-align:center;
      backdrop-filter:blur(20px);
      position:relative;
    }
    
    .footer::before{
      content:'';
      position:absolute;
      top:0;left:0;right:0;
      height:1px;
      background:var(--gradient-2);
    }
    
    .footer-content{
      max-width:1400px;
      margin:auto;
      padding:0 20px;
    }
    
    .footer-text{
      color:var(--text-muted);
      font-size:1rem;
      margin-bottom:12px;
      font-weight:500;
    }
    
    .support-note{
      color:var(--brand);
      font-weight:700;
      font-size:1.1rem;
      text-transform:uppercase;
      letter-spacing:1px;
    }
    
    /* ── utilities ── */
    .hidden{display:none!important}
    
    /* ── loading animation ── */
    .loading-spinner{
      display:inline-block;
      width:16px;height:16px;
      border:2px solid rgba(255,255,255,.3);
      border-radius:50%;
      border-top-color:#fff;
      animation:spin 1s linear infinite;
      margin-right:8px;
    }
    
    @keyframes spin{
      to{transform:rotate(360deg)}
    }
    
    @keyframes shake{
      0%, 100%{transform:translateX(0)}
      10%, 30%, 50%, 70%, 90%{transform:translateX(-5px)}
      20%, 40%, 60%, 80%{transform:translateX(5px)}
    }
    
    /* ── responsive improvements ── */
    @media(max-width:768px){
      .header-container{padding:0 15px;gap:15px}
      .search-container{max-width:none}
      .container{padding:30px 15px}
      .hero-section{padding:40px 0}
      .games-grid{gap:20px}
      .game-card{padding:20px}
    }
   /* ── download overlay ── */
.download-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(10,10,15,0.95);
  backdrop-filter:blur(20px);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
}

.download-overlay.active{
  opacity:1;
  visibility:visible;
}

.download-modal{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:24px;
  padding:40px;
  max-width:500px;
  width:90%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  backdrop-filter:blur(30px);
  position:relative;
  overflow:hidden;
}

.download-modal::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  pointer-events:none;
}

.game-preview{
  position:relative;
  width:120px;
  height:120px;
  margin:0 auto 20px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.3);
}

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

.download-icon{
  position:absolute;
  bottom:-10px;
  right:-10px;
  width:50px;
  height:50px;
  background:var(--gradient-2);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  animation:downloadPulse 2s ease-in-out infinite;
  box-shadow:0 8px 25px rgba(255,59,130,0.5);
  border:3px solid var(--bg);
}

@keyframes downloadPulse{
  0%, 100%{transform:scale(1); box-shadow:0 8px 25px rgba(255,59,130,0.5)}
  50%{transform:scale(1.1); box-shadow:0 12px 35px rgba(255,59,130,0.7)}
}

.download-title{
  font-size:1.8rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:10px;
}

.download-subtitle{
  color:var(--text-muted);
  font-size:1rem;
  margin-bottom:30px;
}

.progress-container{
  margin-bottom:30px;
}

.progress-bar{
  width:100%;
  height:8px;
  background:rgba(255,255,255,0.1);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:15px;
  position:relative;
}

.progress-fill{
  height:100%;
  background:var(--gradient-2);
  border-radius:4px;
  transition:width 0.3s ease;
  position:relative;
  overflow:hidden;
}

.progress-fill::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation:progressShine 1.5s ease-in-out infinite;
}

@keyframes progressShine{
  0%{left:-100%}
  100%{left:100%}
}

.progress-text{
  font-size:0.9rem;
  color:var(--text-muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.file-list{
  text-align:left;
  margin-bottom:20px;
}

.file-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
  color:var(--text-muted);
  font-size:0.9rem;
  transition:color 0.3s ease;
}

.file-item.active{
  color:var(--brand);
}

.file-item.completed{
  color:var(--text);
}

.file-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
}

.file-status{
  margin-left:auto;
  font-size:0.8rem;
  font-weight:600;
}

.close-btn{
  position:absolute;
  top:15px;
  right:15px;
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:24px;
  cursor:pointer;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all 0.3s ease;
}

.close-btn:hover{
  background:rgba(255,255,255,0.1);
  color:var(--text);
}