*{ box-sizing:border-box }

body{
  margin:0;
  min-height:100vh;
  background:#000;
  font-family: system-ui, -apple-system;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* منع سحب/تحديد مزعج */
body, .card, .overlay{
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.wrap{ width:100%; display:flex; justify-content:center }

.card{
  width:min(520px,100%);
  padding:18px;
  border-radius:26px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}

.slide-img{
  width:100%;
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}

.caption{
  margin-top:14px;
  font-size:22px;
  font-weight:900;
  line-height:1.7;
  white-space:pre-line;
}

.controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}

.nav-btn{
  width:44px;
  height:40px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

.nav-btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.dots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  min-height:12px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
}

.dot.active{ background:#ffd400 }

.hire-btn{
  display:inline-block;
  margin-top:14px;
  padding:14px 20px;
  border-radius:18px;
  background:#ffd400;
  color:#111;
  font-size:18px;
  font-weight:900;
  text-decoration:none;
}

.hidden{ display:none }

/* شاشة البداية */
.overlay{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

/* الزر نفسه */
.start-box{
  width:min(340px, 92vw);
  padding:18px 16px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  cursor:not-allowed;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  outline:none;
}

/* جاهز */
.start-box.ready{
  cursor:pointer;
}

.start-box:disabled{
  opacity:.45;
}

.start-box.ready:disabled{
  opacity:1;
}

.start-text{
  font-size:20px;
  font-weight:800;
}

.start-line{
  height:2px;
  width:40%;
  background:#ffd400;
  border-radius:2px;
  animation:load 1.6s infinite;
  opacity:.9;
}

/* لما يكون مو جاهز نخلي الحركة أهدى */
.start-box:not(.ready) .start-line{
  opacity:.6;
  filter:saturate(.7);
}

@keyframes load{
  0%{ width:10%; opacity:.3 }
  50%{ width:60%; opacity:1 }
  100%{ width:10%; opacity:.3 }
}

/* ============================
   تحسين للجوال بدون تغيير الشكل
   ============================ */
@media (max-width: 520px){
  /* تثبيت مساحة الصورة عشان كل السلايدات تصير نفس الارتفاع تقريباً */
  .slide-img{
    aspect-ratio: 1 / 1;   /* إذا صورك طولية وودك: 9/16 */
    object-fit: contain;    /* يخلي الصورة كاملة بدون قص */
    background:#000;        /* يحافظ على نفس الخلفية */
  }

  /* نفس شكل الأزرار بس لمس أسرع على الجوال */
  .nav-btn, .start-box, .hire-btn{
    touch-action: manipulation;
  }

  /* النص لا يكبر زيادة على الجوال */
  .caption{
    font-size:20px;
  }
}