/* ========== home.css (الصفحة الرئيسية فقط) ========== */

/* Hero */
.hero{padding:4rem 0;text-align:center;
  background:radial-gradient(ellipse at center, rgba(99,102,241,.10) 0%, transparent 70%)}
.hero-title{
  font-size:clamp(2.2rem, 5vw, 3.5rem); font-weight:800; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--text-1),var(--text-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  min-height:56px; /* سطرين كحد أقصى تقريبًا */
}
.hero-subtitle{
  font-size:1.1rem;color:var(--text-2);
  max-width:700px;margin:0 auto 2rem;min-height:24px;
}
.search-container{
  display:flex;align-items:center;max-width:520px;margin:0 auto;
  background:var(--bg-3); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)
}
.search-input{
  flex:1; padding:1rem 1.25rem; background:transparent; border:none; color:var(--text-1);
  font-size:1rem; outline:none; min-height:48px;
}
.search-input::placeholder{color:var(--text-3)}
.search-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px; min-width:56px; height:56px; /* حجز ثابت لمنع أي قفزة */
  background:var(--primary); border:none; color:#fff; cursor:pointer;
  transition:background-color .2s var(--ease)
}
.search-btn:hover{background:var(--primary-dark)}
.search-btn svg{width:22px;height:22px;display:block}

/* Categories */
.categories-section{padding:3rem 0}
.section-title{font-size:2rem;font-weight:700;margin-bottom:1.5rem;text-align:center;min-height:40px}
.categories-grid{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:.5rem
}
.category-item{
  padding:.6rem 1rem;background:var(--bg-3);
  border:1px solid rgba(255,255,255,.08); border-radius:999px;
  cursor:pointer; transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  color:var(--text-2); font-weight:600; user-select:none; min-height:40px; /* CLS-safe */
  display:flex;align-items:center;justify-content:center;
}
.category-item:hover{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);color:#fff}
.category-item.active{background:var(--primary);color:#fff;border-color:transparent}

/* Games Grid */
.games-section{padding:3rem 0 5rem}
.section-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;min-height:44px
}
.loading-indicator{display:flex;align-items:center;gap:.6rem;color:var(--text-2)}
.loading-indicator .spinner{width:18px;height:18px;border:2px solid var(--border);border-top:2px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite}

.games-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem;
}

/* Game Card (هوم) */
.game-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.game-card:hover{transform:translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,.25); border-color:rgba(99,102,241,.28)}

.game-thumbnail{
  width:100%; aspect-ratio:1; background:linear-gradient(135deg,var(--primary),var(--secondary));
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.game-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}

.game-info{
  padding:.85rem 1rem;
}
.game-card .game-title{
  font-size:.95rem; font-weight:700; color:var(--text-1);
  line-height:1.2; margin-bottom:.45rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:32px;
}
.game-description{
  color:var(--text-2); font-size:.86rem; margin-bottom:.7rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:34px;
}
.game-card .game-meta{
  display:flex; align-items:center; justify-content:space-between; font-size:.75rem; color:var(--text-3);
}
.game-category{
  background:rgba(99,102,241,.24); color:#fff; padding:.2rem .6rem; border-radius:999px; font-weight:600; font-size:.72rem;
}

/* Empty / load more */
.empty-state{text-align:center;padding:3rem 1rem}
.empty-icon{width:48px;height:48px;color:var(--text-3);margin-bottom:.75rem;display:inline-block}
.load-more-indicator{display:flex;justify-content:center;align-items:center;gap:.6rem;margin:1.5rem 0;padding:1rem;color:var(--text-2);font-size:.9rem}
.load-more-indicator .spinner{width:18px;height:18px;border:2px solid var(--border);border-top:2px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite}

/* Responsive */
@media (max-width:768px){
  .hero{padding:2.5rem 0}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}