/* STEEL BALL — MOBILE PAGE / SLIDER / ACCOUNT FINAL LAYER
   Built from V6. Mobile only: desktop styles are intentionally untouched. */

@media (max-width:700px){
  /* ===== HERO SLIDER ===== */
  .hero-slider{
    position:relative!important;
    width:100%!important;
    margin:0 0 18px!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
    background:#050608!important;
  }
  .hero-slider::after{
    content:""!important;
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;
    height:132px!important;
    z-index:8!important;
    pointer-events:none!important;
    background:linear-gradient(to bottom,
      rgba(5,6,8,0) 0%,
      rgba(5,6,8,.18) 24%,
      rgba(5,6,8,.62) 62%,
      rgba(5,6,8,.94) 88%,
      #050608 100%)!important;
  }
  .hero-slide::before{
    background:linear-gradient(to bottom,
      rgba(5,6,8,.03) 0%,
      rgba(5,6,8,.06) 35%,
      rgba(5,6,8,.22) 58%,
      rgba(5,6,8,.72) 82%,
      #050608 100%)!important;
  }
  .hero-slide::after{
    background:linear-gradient(to bottom,
      transparent 0%,
      transparent 45%,
      rgba(5,6,8,.12) 60%,
      rgba(5,6,8,.48) 83%,
      #050608 100%)!important;
  }
  .hero-bg-image{
    filter:brightness(.43) saturate(.84)!important;
    transform:none!important;
  }
  .hero-content{
    position:absolute!important;
    z-index:9!important;
    left:12px!important;right:12px!important;bottom:34px!important;
    width:auto!important;margin:0!important;padding:0!important;
    text-align:right!important;
  }
  .hero-badge{margin:0 0 7px!important;display:inline-flex!important;align-items:center!important;}
  .hero-title{
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(27px,8vw,34px)!important;
    line-height:1.08!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  .hero-arabic-title{
    margin:6px 0 7px!important;
    font-size:16px!important;
    line-height:1.45!important;
  }
  .hero-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    align-items:center!important;
    margin:0 0 8px!important;
  }
  .hero-mal-rating,.hero-status{
    min-height:39px!important;height:39px!important;
    box-sizing:border-box!important;
    padding:0 11px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:11px!important;
    line-height:1!important;
  }
  .hero-mal-rating{min-width:78px!important;font-size:10px!important;gap:5px!important;}
  .hero-mal-rating b{font-size:9px!important;}
  .hero-status{font-size:9.5px!important;}
  .hero-views{font-size:9px!important;}
  .hero-genres{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px!important;
    margin:0 0 8px!important;
    max-height:46px!important;
    overflow:hidden!important;
  }
  .hero-genres span{
    padding:4px 7px!important;
    font-size:8px!important;
    line-height:1.15!important;
    border-radius:999px!important;
  }
  .hero-desc{
    margin:0!important;
    font-size:10px!important;
    line-height:1.72!important;
    -webkit-line-clamp:3!important;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    margin-top:11px!important;
  }
  .hero-read-btn,.hero-favorite-btn{
    width:100%!important;
    min-width:0!important;
    height:42px!important;min-height:42px!important;max-height:42px!important;
    padding:0 7px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
    box-sizing:border-box!important;
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease!important;
  }
  .hero-read-btn:active,.hero-favorite-btn:active{transform:scale(.975)!important;}
  .hero-actions .hero-read-btn{order:2!important;}
  .hero-actions .hero-favorite-btn{order:1!important;}

  /* Gold carousel indicators — clickable, compact, no arrows. */
  .hero-dots,.hero-slider .hero-dots,.hero-slider #heroDots{
    position:absolute!important;
    z-index:12!important;
    left:50%!important;right:auto!important;bottom:11px!important;top:auto!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    align-items:center!important;justify-content:center!important;
    gap:5px!important;
    height:16px!important;min-height:16px!important;
    pointer-events:auto!important;
    opacity:1!important;visibility:visible!important;
  }
  .hero-dot{
    display:block!important;
    width:7px!important;height:7px!important;min-width:7px!important;min-height:7px!important;
    padding:0!important;
    border:1px solid rgba(226,184,87,.72)!important;
    border-radius:999px!important;
    background:rgba(226,184,87,.18)!important;
    cursor:pointer!important;
    transition:width .24s ease,background .24s ease,box-shadow .24s ease,transform .24s ease!important;
  }
  .hero-dot:active{transform:scale(.92)!important;}
  .hero-dot.active{
    width:22px!important;
    background:var(--gold)!important;
    border-color:var(--gold)!important;
    box-shadow:0 0 11px rgba(226,184,87,.22)!important;
  }

  /* ===== LATEST UPDATES ===== */
  .latest-updates-section{
    position:relative!important;
    padding-top:8px!important;
    margin-top:0!important;
    border-top:0!important;
    box-shadow:none!important;
  }
  .latest-updates-section::before{display:none!important;content:none!important;}

  /* ===== EXPLORE ===== */
  .explore-page{
    width:100%!important;
    min-height:auto!important;
    box-sizing:border-box!important;
    padding:78px 10px 26px!important;
  }
  .explore-page-head{margin-bottom:14px!important;}
  .explore-page-head h1{font-size:24px!important;line-height:1.25!important;margin:0!important;}
  .explore-page-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  .explore-page-column{
    width:100%!important;box-sizing:border-box!important;
    padding:11px!important;
    border:1px solid rgba(226,184,87,.13)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.025)!important;
  }
  .explore-page-column h2{font-size:13px!important;margin:0 0 9px!important;}
  .explore-page-list{gap:8px!important;}
  .explore-page-item{
    min-height:78px!important;
    grid-template-columns:28px 60px minmax(0,1fr)!important;
    gap:8px!important;padding:7px!important;border-radius:11px!important;
  }
  .explore-page-item img{width:60px!important;height:72px!important;border-radius:8px!important;object-fit:cover!important;}
  .explore-page-rank{width:26px!important;height:26px!important;font-size:9px!important;}
  .explore-page-copy{gap:4px!important;min-width:0!important;}
  .explore-page-copy strong,.explore-page-copy small{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .explore-page-copy strong{font-size:10.5px!important;-webkit-line-clamp:2!important;}
  .explore-page-copy small{font-size:8.5px!important;-webkit-line-clamp:2!important;}

  /* ===== FOOTER ===== */
  .site-footer{
    width:calc(100% - 20px)!important;
    margin:14px auto 4px!important;
    padding:12px 10px 6px!important;
  }
  .footer-disclaimer{margin-top:6px!important;padding-top:7px!important;}
  .footer-main-simple .footer-col{padding:4px 10px!important;}
  .footer-title-link{font-size:10px!important;}
  .footer-disclaimer p{font-size:8px!important;line-height:1.55!important;}
  .footer-copy{font-size:9px!important;}

  /* ===== ACCOUNT PAGE — new clean auth layout ===== */
  .account-page{
    width:100%!important;
    min-height:auto!important;
    box-sizing:border-box!important;
    padding:78px 14px 26px!important;
  }
  .account-page-card{
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .account-page .auth-view{
    display:block!important;
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    text-align:right!important;
  }
  .account-page .auth-view .account-heading{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:10px!important;
    margin:0 0 22px!important;
    text-align:center!important;
  }
  .account-page .account-heading-icon{
    width:56px!important;height:56px!important;
    border-radius:18px!important;
    display:grid!important;place-items:center!important;
    border:1px solid rgba(226,184,87,.28)!important;
    background:linear-gradient(145deg,rgba(226,184,87,.13),rgba(255,255,255,.035))!important;
    color:var(--gold)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.22)!important;
    font-size:19px!important;
  }
  .account-page .auth-view .modal-title{
    margin:0!important;
    font-size:21px!important;
    line-height:1.35!important;
  }
  .account-page .account-subtitle{
    margin:6px 0 0!important;
    font-size:9px!important;
    line-height:1.8!important;
    color:var(--muted)!important;
  }
  .account-page .auth-view .input-field{
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    box-sizing:border-box!important;
    margin:0 0 10px!important;
    padding:0 14px!important;
    border:1px solid rgba(255,255,255,.085)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.035)!important;
    color:#fff!important;
    font-size:10.5px!important;
    outline:none!important;
    transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease!important;
  }
  .account-page .auth-view .input-field:focus{
    border-color:rgba(226,184,87,.45)!important;
    background:rgba(226,184,87,.035)!important;
    box-shadow:0 0 0 3px rgba(226,184,87,.06)!important;
  }
  .account-page .auth-view .main-btn{
    width:100%!important;
    height:44px!important;min-height:44px!important;
    border-radius:12px!important;
    font-size:10.5px!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
  }
  .account-page .text-link{
    margin:12px 0 0!important;
    text-align:center!important;
    font-size:9px!important;
    cursor:pointer!important;
  }
  .account-page .auth-switch{
    margin:16px 0 0!important;
    padding-top:15px!important;
    border-top:1px solid rgba(255,255,255,.055)!important;
    text-align:center!important;
    font-size:9.5px!important;
    line-height:1.8!important;
  }
  .account-page .auth-switch span{cursor:pointer!important;}

  /* Logged-in state keeps the same visual system without the old outer box. */
  .account-page .dashboard-view{
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    text-align:right!important;
  }
  .account-page .account-profile-head{margin:0 0 14px!important;padding:13px!important;}
  .account-page .account-menu-section{margin-top:12px!important;}
  .account-page .bookmarks-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
  .account-page .account-logout{margin-top:14px!important;}
}

@media (max-width:380px){
  .hero-title{font-size:clamp(25px,8vw,31px)!important;}
  .hero-content{left:10px!important;right:10px!important;bottom:31px!important;}
  .hero-actions{gap:6px!important;}
  .hero-read-btn,.hero-favorite-btn{font-size:9px!important;}
  .account-page{padding-left:10px!important;padding-right:10px!important;}
}