@font-face{
  font-family:'Vazir';
  src:url("https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/Vazir.ttf");
}

*{
  box-sizing:border-box;
  font-family:'Vazir',sans-serif;
}

body{
  margin:0;
  background:#0b1220; /* پس زمینه همان قبلی */
  color:#fff;
  direction:rtl;
  font-size:15px;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:30px;
}

/* ====== HEAD ====== */
h1,h2,h3{
  color:#22c55e;
  margin:0;
}

/* عنوان و زیرعنوان در کادر */
.site-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:30px;
  flex-wrap:wrap;
}
.title-box, .subtitle-box{
  background:#111827;
  padding:20px;
  border-radius:20px;
  flex:1;
}
.title-box{text-align:right}
.subtitle-box{text-align:right}

/* ===== BUTTONS ===== */
button{
  background:#22c55e;
  color:#000;
  border:0;
  padding:12px 20px;
  border-radius:16px;
  cursor:pointer;
  transition:.3s;
}
button:hover{
  background:#16a34a;
  transform:scale(1.05);
}

/* ===== TOP USERS PODIUM ===== */
.top-users {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap:20px;
  margin-bottom:30px;
  flex-wrap:wrap;
}
.top-users .card {
  flex:1;
  max-width:150px;
  padding:16px;
  transition:.3s;
  text-align:center;
}
.top-users .card.active {
  flex:1.2;
  max-width:180px;
}

/* موبایل و تبلت حرفه‌ای تر */
@media (max-width:768px){
  /* کاربران برتر کنار هم و اسکرول افقی */
  .top-users {
    flex-direction:row;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:10px;
    gap:10px;
  }
  .top-users .card.active, .top-users .card {
    flex:none;
    max-width:120px;
    margin-bottom:0;
  }
}

/* ===== CHALLENGE CARDS ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.card{
  background:#111827;
  padding:20px;
  border-radius:22px;
  transition:.3s;
  box-shadow:0 0 20px rgba(0,0,0,.4);
}

.card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 25px #22c55e;
}

.card.active{
  border:2px solid #22c55e;
}

/* ===== LINKS ===== */
a{
  color:#22c55e;
  font-weight:bold;
}
a:hover{
  color:#16a34a;
}

/* ===== TIMER BOX ===== */
#timerBox{
  display:flex;
  justify-content:flex-start; /* لحظه شمار چپ‌چین */
  gap:15px;
  background:#111827;
  padding:15px;
  border-radius:20px;
  max-width:500px;
  margin:auto 0 30px 0;
  color:#22c55e;
  flex-wrap:wrap;
  direction:ltr; /* متن داخلی LTR */
}
#timerBox div{
  text-align:center;
}
#timerBox div div:first-child{
  font-size:22px;
  font-weight:bold;
}
#timerBox div div:last-child{
  font-size:10px;
  color:#a5f3fc;
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  body{font-size:14px}
  .container{padding:15px}
  h1{font-size:20px}
  h2{font-size:18px}
  .title-box, .subtitle-box{text-align:center}

  button{width:100%; padding:14px; font-size:15px}

  /* لحظه‌شمار */
  #timerBox{
    flex-wrap:wrap;
  }
}