:root{
  --bg:#0b1120;
  --card:#1e293b;
  --text:#fff;
  --sub:#cbd5e1;
  --primary:#38bdf8;
  --border:rgba(255,255,255,0.1);
}

.light-mode{
  --bg:#f1f5f9;
  --card:#fff;
  --text:#0f172a;
  --sub:#475569;
  --primary:#0ea5e9;
  --border:rgba(0,0,0,0.08);
}

body{
  margin:0;
  font-family:sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  padding:15px 30px;
}
nav a{color:var(--text);margin-left:15px}

/* HEADER */
.header{
  text-align:center;
  /* padding:40px 20px; */
}

/* SEARCH */
.search-box{
  max-width:500px;
  margin:20px auto;
}
.search-box input{
  width:100%;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}

.search-wrapper{
  position:relative;
}

.search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  opacity:0.6;
  pointer-events:none;
}

.search-box input{
  width:100%;
  padding:14px 14px 14px 40px; /* space for icon */
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 320px));
  justify-content:center; /* KEY FIX */
  gap:25px;
  padding:40px;
}

.card{
  transition:0.3s;
}

.card.hide{
  opacity:0;
  transform:scale(0.95);
  pointer-events:none;
  position:absolute;
}




/* CARD */
.card{
  background:var(--card);
  padding:20px;
  border-radius:16px;
  border:1px solid var(--border);
  transition:.3s;
}
.card:hover{transform:translateY(-6px)}

.card img{
  width:100%;
  /* border-radius:12px; */
}

/* TITLE */
.card h3{margin:10px 0}

/* RATING */
.rating{
  color:gold;
  font-size:14px;
}

/* BUTTON */
.play-btn img{
  width:160px;
  margin-top:10px;
}

/* EMPTY */
.no-result{
  text-align:center;
  padding:50px;
  display:none;
}

#loader{
  color:var(--subtext);
  font-size:14px;
  animation:fade 1s infinite alternate;
}

@keyframes fade{
  from{opacity:0.3}
  to{opacity:1}
}

/* SKELETON */
.skeleton{
  background:var(--card);
  border-radius:16px;
  padding:20px;
}

.skeleton-box{
  background:linear-gradient(
    90deg,
    #2a2a2a 25%,
    #3a3a3a 50%,
    #2a2a2a 75%
  );
  background-size:200% 100%;
  animation:shimmer 1.2s infinite;
  border-radius:10px;
}

.light-mode .skeleton-box{
  background:linear-gradient(
    90deg,
    #e2e8f0 25%,
    #cbd5e1 50%,
    #e2e8f0 75%
  );
}

/* shimmer animation */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

#skeletonContainer{
  position:absolute;
  width:100%;
  left:0;
}

.store-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.store-btn img{
  width:140px;
  transition:.3s;
}

.store-btn img:hover{
  transform:scale(1.05);
}

.card{
  cursor:pointer;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px;
}
.categories {
    text-align: center;
    padding: 20px;
}
.categories button {
    margin: 5px;
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
/* .card .appIcon{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:20px;
  display:block;
  margin:auto;
} */

.card .appIcon{
  border-radius:20px;
}

.lazy-img{
  opacity:0;
  transition:0.3s;
}

.lazy-img.loaded{
  opacity:1;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  width:40px;
  height:40px;
  border-radius:10px;
  object-fit:cover;
}

/* optional active link */
nav a.active{
  color:#38bdf8;
  font-weight:600;
}

nav a{
  text-decoration: none;
}

.categories button.active{
  background:#38bdf8;
  color:#000;
}

.categories button {
    text-transform: capitalize;
}

.search-box input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(56,189,248,0.2);
}


.search-wrapper{
  position:relative;
}

.search-box input{
  width:100%;
  padding:14px 45px 14px 42px; /* space for both icons */
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:15px;
  transition:0.25s;
}

/* 🔍 icon */
.search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  opacity:0.6;
}

/* ❌ clear button */
.clear-btn{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:0;
  cursor:pointer;
  transition:0.2s;
  background:rgba(255,255,255,0.1);
  padding:4px 6px;
  border-radius:50%;
}

/* show only when typing */
.search-wrapper.has-text .clear-btn{
  opacity:0.7;
}

.clear-btn:hover{
  opacity:1;
}

/* focus effect */
.search-box input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(56,189,248,0.15);
}




.search-wrapper{
  position:relative;
  display:flex;
  align-items:center; /* 🔥 PERFECT vertical alignment */
}

.search-box input{
  width:100%;
  padding:14px 45px 14px 42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:15px;
}

/* 🔍 icon */
.search-icon{
  position:absolute;
  left:14px;
  pointer-events:none;
  font-size:16px;
  opacity:0.6;
}

/* ❌ clear button */
.clear-btn{
  position:absolute;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:26px;
  width:26px;
  font-size:14px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  cursor:pointer;
  opacity:0;
  transition:0.2s;
}

/* show only when typing */
.search-wrapper.has-text .clear-btn{
  opacity:0.8;
}



.card {
  position: relative;
  cursor: pointer;
}

/* Full clickable overlay */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
}

/* Keep buttons clickable ABOVE overlay */
.store-buttons a {
  position: relative;
  z-index: 2;
}



.store-buttons a img {
    height: 40px;
}