/* =========================================================
   STEEL BALL — FINAL MOBILE POLISH
   Mobile-only overrides. Desktop is intentionally untouched.
   ========================================================= */
@media (max-width:700px){
  :root{
    --mobile-header-h:68px;
    --mobile-bottom-h:74px;
    --mobile-side:12px;
  }

  html,body{width:100%;min-width:0;overflow-x:hidden;}
  body{
    padding-bottom:calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom)) !important;
    background:#050608;
  }
  body.search-open,
  body.mobile-panel-open{overflow:hidden !important;}

  /* ---------- Header: logo + search icon ---------- */
  .header{
    position:sticky !important;
    top:0 !important;
    z-index:2400 !important;
    height:var(--mobile-header-h) !important;
    min-height:var(--mobile-header-h) !important;
    padding:8px var(--mobile-side) !important;
    background:rgba(7,8,10,.97) !important;
    border-bottom:1px solid rgba(226,184,87,.13) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }
  .header-inner{
    height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    direction:ltr !important;
  }
  .logo-brand-wrap{
    order:2 !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:1px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    filter:none !important;
  }
  .brand-s-mark{
    font-size:39px !important;
    line-height:.76 !important;
    transform:translateY(1px) !important;
  }
  .brand-text-main,.brand-text-gold{
    font-size:27px !important;
    line-height:.94 !important;
  }
  .header-actions{
    order:1 !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    direction:ltr !important;
    margin:0 !important;
  }
  .header-actions .mobile-searchbar,
  .header-actions .mobile-menu-toggle,
  .header-actions .login-btn{display:none !important;}
  .header-actions .search-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    padding:0 !important;
    border-radius:13px !important;
    border:1px solid rgba(226,184,87,.25) !important;
    background:rgba(255,255,255,.035) !important;
    color:#f2f2f2 !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .header-actions .search-toggle i{font-size:16px !important;color:var(--gold) !important;}
  .header-actions .search-toggle:hover,
  .header-actions .search-toggle:focus-visible{border-color:rgba(226,184,87,.48) !important;background:rgba(226,184,87,.07) !important;}
  .header-actions .search-toggle:active{transform:scale(.97) !important;}

  /* ---------- Search: dedicated mobile screen ---------- */
  .search-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2350 !important;
    display:none !important;
    align-items:flex-start !important;
    justify-content:stretch !important;
    padding:calc(var(--mobile-header-h) + 12px) var(--mobile-side) calc(var(--mobile-bottom-h) + 14px + env(safe-area-inset-bottom)) !important;
    background:#08090c !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:auto !important;
  }
  .search-overlay.open{display:flex !important;}
  .search-overlay-inner{width:100% !important;max-width:none !important;}
  .search-overlay-bar{
    display:flex !important;
    height:52px !important;
    padding:0 12px !important;
    gap:9px !important;
    border-radius:14px !important;
    border:1px solid rgba(226,184,87,.24) !important;
    background:#101216 !important;
    box-shadow:none !important;
  }
  .search-overlay-bar i{font-size:16px !important;color:var(--gold) !important;}
  .search-overlay-bar input{font-size:14px !important;direction:rtl !important;text-align:right !important;}
  .search-overlay-close{width:34px !important;height:34px !important;border-radius:9px !important;font-size:23px !important;}
  .search-results{margin-top:12px !important;display:block !important;max-height:none !important;overflow:visible !important;border:0 !important;background:transparent !important;box-shadow:none !important;}
  .search-result-item{
    grid-template-columns:54px minmax(0,1fr) auto !important;
    gap:10px !important;
    min-height:78px !important;
    margin-bottom:8px !important;
    padding:10px !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:13px !important;
    background:rgba(255,255,255,.025) !important;
  }
  .search-result-item img{width:54px !important;height:70px !important;border-radius:8px !important;object-fit:cover !important;}

  /* ---------- Bottom app nav ---------- */
  .mobile-bottom-nav{
    position:fixed !important;
    left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;
    height:var(--mobile-bottom-h) !important;
    z-index:2500 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
    padding:4px 3px calc(4px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    border:0 !important;
    border-top:1px solid rgba(226,184,87,.15) !important;
    border-radius:0 !important;
    background:#0a0b0e !important;
    box-shadow:0 -8px 26px rgba(0,0,0,.38) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }
  .mobile-bottom-item{
    height:100% !important;
    min-width:0 !important;
    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#aaa !important;
    font-size:10px !important;
    font-weight:900 !important;
    gap:4px !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .mobile-bottom-item i{font-size:18px !important;color:#8f9198 !important;transform:none !important;}
  .mobile-bottom-item:hover{background:transparent !important;color:#aaa !important;box-shadow:none !important;}
  .mobile-bottom-item:active{background:rgba(226,184,87,.045) !important;transform:scale(.985) !important;}
  .mobile-bottom-item.active{background:rgba(226,184,87,.08) !important;color:#fff !important;box-shadow:none !important;}
  .mobile-bottom-item.active i{color:var(--gold-2) !important;}
  .mobile-bottom-item.active::after{width:22px !important;height:2px !important;bottom:3px !important;background:var(--gold) !important;}

  /* ---------- Home page ---------- */
  .page-content{padding-top:0 !important;}
  .hero-slider{
    height:min(650px,calc(100svh - var(--mobile-header-h))) !important;
    min-height:540px !important;
    max-height:650px !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#050608 !important;
  }
  .hero-slide::before{
    background:linear-gradient(
      to bottom,
      rgba(5,6,8,0) 0%,
      rgba(5,6,8,.03) 43%,
      rgba(5,6,8,.32) 64%,
      rgba(5,6,8,.80) 82%,
      #050608 100%
    ) !important;
  }
  .hero-slide::after{
    background:linear-gradient(
      to bottom,
      transparent 0%,
      transparent 52%,
      rgba(5,6,8,.18) 68%,
      rgba(5,6,8,.64) 87%,
      #050608 100%
    ) !important;
  }
  .hero-bg-image{
    object-position:center center !important;
    transform:none !important;
    filter:brightness(.47) saturate(.88) !important;
  }
  .hero-content{
    width:calc(100% - 30px) !important;
    margin:0 15px !important;
    left:auto !important;right:auto !important;
    bottom:27px !important;
    padding:0 !important;
    text-align:right !important;
  }
  .hero-badge{font-size:10px !important;padding:6px 10px !important;margin-bottom:11px !important;}
  .hero-title{font-size:31px !important;line-height:1.05 !important;}
  .hero-arabic-title{font-size:18px !important;margin:8px 0 12px !important;}
  .hero-meta{gap:7px !important;margin-bottom:12px !important;}
  .hero-mal-rating,.hero-status{font-size:10px !important;padding:7px 9px !important;}
  .hero-views{font-size:10px !important;}
  .hero-genres{gap:5px !important;margin-bottom:11px !important;}
  .hero-genres span{font-size:9px !important;padding:4px 7px !important;}
  .hero-desc{
    font-size:11px !important;
    line-height:1.72 !important;
    margin:0 !important;
    -webkit-line-clamp:3 !important;
  }
  .hero-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) !important;
    gap:9px !important;
    margin-top:16px !important;
  }
  .hero-read-btn,.hero-favorite-btn{
    width:100% !important;
    min-width:0 !important;
    height:47px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
  .hero-read-btn{padding:0 10px !important;}
  .hero-favorite-btn{padding:0 8px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
  .hero-dots{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:9px !important;gap:6px !important;}
  .hero-dot{width:14px !important;height:4px !important;}
  .hero-dot.active{width:32px !important;}

  /* ---------- Latest updates: compact landscape card ---------- */
  .latest-updates-section{
    width:100% !important;
    padding:22px 10px 20px !important;
    background:#050608 !important;
  }
  .latest-heading{margin:0 0 13px !important;padding:0 !important;}
  .latest-heading::after{display:none !important;}
  .latest-heading-main{gap:8px !important;}
  .latest-heading-mark{height:28px !important;width:3px !important;}
  .latest-heading h2{font-size:19px !important;}
  .latest-heading .section-accent{font-size:8px !important;}
  .latest-grid{display:flex !important;flex-direction:column !important;gap:10px !important;}
  .latest-manga-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 105px !important;
    grid-template-rows:1fr !important;
    width:100% !important;
    height:204px !important;
    min-height:204px !important;
    max-height:204px !important;
    margin:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    direction:ltr !important;
  }
  .latest-manga-body{
    grid-column:1 !important;
    order:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:10px 10px 9px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    direction:rtl !important;
  }
  .latest-manga-cover{
    grid-column:2 !important;
    order:0 !important;
    width:105px !important;
    height:204px !important;
    min-height:204px !important;
    max-height:204px !important;
    overflow:hidden !important;
    position:relative !important;
    background:#0b0d11 !important;
  }
  .latest-manga-cover img{
    width:100% !important;height:100% !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
  }
  .latest-cover-backdrop,.latest-cover-shine{display:none !important;}
  .latest-badge{top:7px !important;right:7px !important;font-size:8px !important;padding:4px 6px !important;}
  .latest-manga-meta{gap:7px !important;align-items:flex-start !important;margin:0 0 7px !important;}
  .latest-manga-meta > div{min-width:0 !important;flex:1 1 auto !important;}
  .latest-manga-meta h3{
    font-size:12px !important;
    line-height:1.3 !important;
    height:34px !important;
    margin:0 !important;
    overflow:hidden !important;
    white-space:normal !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
  }
  .latest-manga-meta p{font-size:8px !important;margin-top:2px !important;}
  .latest-rating{min-width:51px !important;padding:5px 5px !important;border-radius:8px !important;font-size:8px !important;}
  .latest-chapter-list{gap:5px !important;margin-top:0 !important;}
  .latest-chapter-link{
    min-height:34px !important;
    padding:5px 7px !important;
    border-radius:8px !important;
    gap:6px !important;
    font-size:8px !important;
  }
  .latest-chapter-link span{font-size:9px !important;}
  .latest-chapter-link small{font-size:7px !important;}

  /* ---------- Catalog: two equal cards ---------- */
  .catalog-section{padding:80px 10px 24px !important;}
  .catalog-toolbar{display:grid !important;grid-template-columns:minmax(0,1fr) 46px !important;gap:8px !important;align-items:start !important;}
  .catalog-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;width:100% !important;max-width:none !important;margin:0 !important;}
  .catalog-grid .card{width:100% !important;max-width:none !important;min-width:0 !important;overflow:hidden !important;border-radius:12px !important;}
  .catalog-grid .card-cover{width:100% !important;aspect-ratio:2/3 !important;height:auto !important;overflow:hidden !important;}
  .catalog-grid .card-cover img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;transform:none !important;filter:none !important;}
  .catalog-grid .card-info{min-height:112px !important;padding:10px 8px 9px !important;display:flex !important;flex-direction:column !important;gap:7px !important;}
  .catalog-grid .manga-title{height:37px !important;min-height:37px !important;font-size:11px !important;line-height:1.45 !important;overflow:hidden !important;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;}
  .catalog-grid .rating-container{min-height:27px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:4px !important;}
  .catalog-grid .latest-rating{min-width:54px !important;font-size:8px !important;padding:5px !important;}
  .catalog-grid .catalog-card-bottom{min-height:28px !important;gap:4px !important;}
  .catalog-grid .catalog-card-bottom .chapter-num{min-height:28px !important;font-size:8px !important;padding:0 5px !important;}
  .catalog-grid .catalog-type{font-size:8px !important;}
  .catalog-grid .card:hover{transform:none !important;box-shadow:none !important;}

  /* ---------- Work pages ---------- */
  .work-shell{width:calc(100% - 20px) !important;padding-top:76px !important;padding-bottom:36px !important;}
  .work-cover{width:min(245px,74vw) !important;}

  /* ---------- Explore page ---------- */
  .explore-page{padding:78px 10px 24px !important;}
  .explore-page-grid{display:flex !important;flex-direction:column !important;gap:10px !important;}
  .explore-page-column{padding:11px !important;border-radius:14px !important;}

  /* ---------- Account sheet ---------- */
  #userModal{padding:8px !important;align-items:flex-end !important;z-index:2600 !important;}
  #userModal .modal-content{width:100% !important;max-width:none !important;max-height:calc(100svh - 16px) !important;border-radius:20px 20px 14px 14px !important;overflow:auto !important;}
  #userModal .close-btn{top:9px !important;right:9px !important;z-index:3 !important;}
}

@media (max-width:380px){
  .brand-s-mark{font-size:36px !important;}
  .brand-text-main,.brand-text-gold{font-size:25px !important;}
  .hero-title{font-size:28px !important;}
  .latest-manga-card{grid-template-columns:minmax(0,1fr) 98px !important;height:200px !important;min-height:200px !important;max-height:200px !important;}
  .latest-manga-cover{width:98px !important;height:200px !important;min-height:200px !important;max-height:200px !important;}
  .latest-manga-meta h3{font-size:11px !important;}
}

/* Never let this mobile layer affect desktop. */
@media (min-width:701px){.mobile-final-polish-marker{display:none !important;}}

/* =========================================================
   MOBILE FINAL REFERENCE PASS
   Home page only. Desktop remains untouched.
   ========================================================= */
@media (max-width:700px){
  /* Header: compact search icon + slightly larger brand. */
  .logo-brand-wrap{gap:0!important;}
  .brand-s-mark{font-size:41px!important;line-height:.72!important;}
  .brand-text-main,.brand-text-gold{font-size:28px!important;}

  /* Slider: remove the lower selection/dot strip and all artificial top darkness.
     Keep the natural bottom fade only so it blends into the following section. */
  .hero-slider{
    height:calc(100svh - var(--mobile-header-h))!important;
    min-height:560px!important;
    max-height:650px!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:#050608!important;
  }
  .hero-slide::before{
    background:linear-gradient(to bottom,
      rgba(5,6,8,0) 0%,
      rgba(5,6,8,0) 46%,
      rgba(5,6,8,.16) 63%,
      rgba(5,6,8,.62) 82%,
      #050608 100%)!important;
  }
  .hero-slide::after{
    background:linear-gradient(to bottom,
      transparent 0%,
      transparent 56%,
      rgba(5,6,8,.12) 70%,
      rgba(5,6,8,.42) 88%,
      #050608 100%)!important;
  }
  .hero-bg-image{object-position:center center!important;filter:brightness(.50) saturate(.9)!important;}
  .hero-content{
    width:calc(100% - 24px)!important;
    margin:0 12px!important;
    bottom:18px!important;
    padding-top:82px!important;
    text-align:right!important;
  }
  .hero-title{font-size:32px!important;line-height:1.05!important;}
  .hero-arabic-title{font-size:19px!important;margin:7px 0 10px!important;}
  .hero-meta{gap:6px!important;margin-bottom:9px!important;}
  .hero-genres{gap:4px!important;margin-bottom:8px!important;}
  .hero-desc{font-size:10.5px!important;line-height:1.75!important;-webkit-line-clamp:3!important;}
  .hero-actions{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:8px!important;margin-top:12px!important;}
  .hero-read-btn,.hero-favorite-btn{height:48px!important;font-size:11px!important;border-radius:12px!important;}
  .hero-favorite-btn{min-width:0!important;padding:0 8px!important;}
  .hero-dots{display:none!important;}

  /* Latest updates: compact reference-style landscape card. */
  .latest-updates-section{padding:18px 10px 20px!important;}
  .latest-grid{gap:9px!important;}
  .latest-manga-card{
    grid-template-columns:minmax(0,1fr) 116px!important;
    width:100%!important;
    height:188px!important;
    min-height:188px!important;
    max-height:188px!important;
    border-radius:14px!important;
  }
  .latest-manga-cover{
    width:116px!important;
    height:188px!important;
    min-height:188px!important;
    max-height:188px!important;
    background:#0a0b0f!important;
  }
  .latest-manga-cover img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center!important;
    transform:none!important;filter:none!important;
  }
  .latest-manga-body{padding:9px 10px 8px!important;}
  .latest-manga-meta{margin:0 0 5px!important;gap:6px!important;}
  .latest-manga-meta h3{font-size:12px!important;height:31px!important;min-height:31px!important;max-height:31px!important;}
  .latest-manga-meta p{font-size:8px!important;margin-top:2px!important;}
  .latest-rating{min-width:49px!important;height:auto!important;padding:5px 4px!important;font-size:8px!important;}
  .latest-chapter-list{gap:4px!important;}
  .latest-chapter-link{min-height:31px!important;padding:5px 7px!important;border-radius:8px!important;}
  .latest-chapter-link span{font-size:8.5px!important;}
  .latest-chapter-link small{font-size:6.8px!important;}

  /* Keep the home/latest area visually separated without an extra line touching the slider. */
  .latest-updates-section{border-top:0!important;box-shadow:none!important;}
}

@media (max-width:380px){
  .brand-s-mark{font-size:38px!important;}
  .brand-text-main,.brand-text-gold{font-size:26px!important;}
  .latest-manga-card{grid-template-columns:minmax(0,1fr) 108px!important;height:184px!important;min-height:184px!important;max-height:184px!important;}
  .latest-manga-cover{width:108px!important;height:184px!important;min-height:184px!important;max-height:184px!important;}
}


/* Keep Account identical to the other mobile navigation items. */
@media (max-width:700px){
  .mobile-bottom-item.account-nav-item{
    position:relative!important;
    transition:background .2s ease,color .2s ease,transform .2s ease!important;
  }
  .mobile-bottom-item.account-nav-item:active{
    background:rgba(226,184,87,.045)!important;
    transform:scale(.985)!important;
  }
  .mobile-bottom-item.account-nav-item.active{
    background:rgba(226,184,87,.08)!important;
    color:#fff!important;
  }
  .mobile-bottom-item.account-nav-item.active i{color:var(--gold-2)!important;}
  .mobile-bottom-item.account-nav-item.active::after{
    content:""!important;
    position:absolute!important;
    bottom:3px!important;
    width:22px!important;
    height:2px!important;
    border-radius:999px!important;
    background:var(--gold)!important;
  }
}