/* STEEL BALL — clean mobile foundation + card system
   This file is the single source of truth for mobile card geometry.
   Desktop styles are never touched. */

@media (max-width:700px){
  :root{--m-header:70px;--m-bottom:74px;--m-gap:12px;}
  html,body{max-width:100%;overflow-x:hidden;}
  body{padding-bottom:calc(var(--m-bottom) + env(safe-area-inset-bottom))!important;background:#050608!important;}

  /* Header */
  .header{position:sticky!important;top:0!important;height:var(--m-header)!important;min-height:var(--m-header)!important;padding:9px 12px!important;z-index:4000!important;background:#08090c!important;border-bottom:1px solid rgba(226,184,87,.12)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;}
  .header-inner{height:52px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;direction:ltr!important;}
  .logo-brand-wrap{order:2!important;display:inline-flex!important;align-items:center!important;gap:1px!important;margin:0!important;padding:0!important;}
  .brand-s-mark{font-size:38px!important;line-height:.78!important;transform:translateY(1px)!important;}
  .brand-text-main,.brand-text-gold{font-size:26px!important;line-height:.94!important;}
  .header-actions{order:1!important;display:flex!important;align-items:center!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;width:44px!important;height:44px!important;min-width:44px!important;border-radius:12px!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(226,184,87,.25)!important;background:#101216!important;color:#fff!important;box-shadow:none!important;}
  .header-actions .search-toggle i{color:var(--gold)!important;font-size:17px!important;}

  /* Search */
  .search-overlay{position:fixed!important;inset:0!important;z-index:3900!important;padding:calc(var(--m-header) + 12px) 12px calc(var(--m-bottom) + 12px)!important;background:#07080b!important;display:none!important;overflow:auto!important;}
  .search-overlay.open{display:block!important;}
  .search-overlay-inner{width:100%!important;max-width:none!important;}
  .search-overlay-bar{height:52px!important;display:flex!important;align-items:center!important;gap:9px!important;padding:0 12px!important;border:1px solid rgba(226,184,87,.2)!important;border-radius:13px!important;background:#101216!important;}
  .search-overlay-bar input{font-size:14px!important;}
  .search-results{margin-top:12px!important;display:block!important;background:transparent!important;border:0!important;max-height:none!important;overflow:visible!important;}

  /* Bottom app nav */
  .mobile-bottom-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:var(--m-bottom)!important;width:100%!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;margin:0!important;padding:4px 2px env(safe-area-inset-bottom)!important;border:0!important;border-top:1px solid rgba(226,184,87,.14)!important;border-radius:0!important;background:#0a0b0e!important;z-index:4100!important;box-shadow:0 -8px 24px rgba(0,0,0,.38)!important;}
  .mobile-bottom-item{min-width:0!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;color:#9a9ba1!important;font-size:10px!important;font-weight:800!important;box-shadow:none!important;}
  .mobile-bottom-item i{font-size:19px!important;color:#8f9198!important;}
  .mobile-bottom-item.active{color:#fff!important;background:rgba(226,184,87,.05)!important;}
  .mobile-bottom-item.active i{color:var(--gold-2)!important;}
  .mobile-bottom-item.active::after{content:"";position:absolute!important;bottom:3px!important;width:24px!important;height:2px!important;border-radius:5px!important;background:var(--gold)!important;}

  /* Hero */
  .hero-slider{height:min(640px,calc(100svh - var(--m-header)))!important;min-height:520px!important;max-height:640px!important;margin:0!important;border-radius:0!important;border:0!important;outline:0!important;overflow:hidden!important;background:#050608!important;}
  .hero-dots,.hero-slider #heroDots{display:none!important;}
  .hero-slide::before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 36%,rgba(0,0,0,.30) 62%,rgba(0,0,0,.82) 82%,#050608 100%)!important;}
  .hero-slide::after{background:linear-gradient(to bottom,transparent 0%,transparent 45%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.55) 82%,#050608 100%)!important;}
  .hero-bg-image{transform:none!important;filter:brightness(.45) saturate(.88)!important;}
  .hero-content{left:12px!important;right:12px!important;bottom:22px!important;width:auto!important;margin:0!important;text-align:right!important;}
  .hero-actions{display:grid!important;grid-template-columns:minmax(0,.78fr) minmax(0,1fr)!important;gap:10px!important;}
  .hero-actions .favorite-btn,.hero-actions .main-btn{min-height:56px!important;height:56px!important;margin:0!important;}
  .hero-actions .favorite-btn{font-size:13px!important;}
  .hero-actions .main-btn{font-size:15px!important;}

  /* ========================================================
     LATEST UPDATES — rebuilt from scratch for mobile
     Fixed 2-column card, cover is always a true 2:3 frame.
     ======================================================== */
  .latest-updates-section{width:100%!important;box-sizing:border-box!important;padding:18px 12px 22px!important;}
  .latest-grid{display:flex!important;flex-direction:column!important;gap:14px!important;width:100%!important;}
  .latest-manga-card{display:grid!important;grid-template-columns:minmax(0,1fr) 164px!important;width:100%!important;height:246px!important;min-height:246px!important;max-height:246px!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:15px!important;background:#0d0f13!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 10px 22px rgba(0,0,0,.16)!important;direction:ltr!important;box-sizing:border-box!important;}
  .latest-manga-cover{grid-column:2!important;grid-row:1!important;width:164px!important;height:246px!important;min-width:164px!important;min-height:246px!important;max-height:246px!important;align-self:stretch!important;margin:0!important;border-radius:0!important;overflow:hidden!important;background:#080a0d!important;}
  .latest-manga-cover img{width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;display:block!important;object-fit:cover!important;object-position:center center!important;transform:none!important;filter:none!important;transition:none!important;image-rendering:auto!important;}
  .latest-cover-backdrop,.latest-cover-shine{display:none!important;}
  .latest-badge{top:9px!important;left:9px!important;right:auto!important;font-size:9px!important;line-height:1!important;padding:6px 8px!important;border-radius:10px!important;z-index:3!important;}
  .latest-manga-body{grid-column:1!important;grid-row:1!important;width:100%!important;height:246px!important;min-height:246px!important;max-height:246px!important;min-width:0!important;padding:13px 11px!important;direction:rtl!important;display:flex!important;flex-direction:column!important;gap:0!important;box-sizing:border-box!important;overflow:hidden!important;}
  .latest-manga-meta{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:9px!important;width:100%!important;margin:0 0 10px!important;}
  .latest-manga-meta>div{min-width:0!important;display:block!important;}
  .latest-manga-meta h3{font-size:13px!important;line-height:1.35!important;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0 0 2px!important;text-align:right!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;}
  .latest-manga-meta p{font-size:8px!important;line-height:1.45!important;height:18px!important;margin:0!important;color:#d2d4d8!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;}
  .latest-rating{width:64px!important;min-width:64px!important;height:34px!important;min-height:34px!important;max-height:34px!important;padding:0 5px!important;border-radius:9px!important;font-size:9px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;box-sizing:border-box!important;text-align:center!important;line-height:1.1!important;}
  .latest-rating .mal-label{display:block!important;line-height:1!important;}
  .latest-chapter-list{display:flex!important;flex-direction:column!important;gap:6px!important;min-width:0!important;width:100%!important;margin:0!important;}
  .latest-chapter-link{width:100%!important;height:37px!important;min-height:37px!important;max-height:37px!important;padding:6px 8px!important;border-radius:8px!important;gap:6px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-width:0!important;box-sizing:border-box!important;}
  .latest-chapter-link span{min-width:0!important;flex:1 1 auto!important;font-size:9px!important;line-height:1.3!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:right!important;}
  .latest-chapter-link small{font-size:7.5px!important;line-height:1.2!important;white-space:nowrap!important;flex:0 0 auto!important;}

  /* ========================================================
     ALL MANGA — rebuilt from scratch for mobile
     Larger footprint + enough vertical space for clean metadata.
     ======================================================== */
  .catalog-section{width:100%!important;padding:72px 10px 24px!important;margin:0!important;box-sizing:border-box!important;}
  .catalog-grid,#all-manga-container.catalog-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important;row-gap:15px!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important;align-items:start!important;}
  #all-manga-container.catalog-grid>.card{width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;display:flex!important;flex-direction:column!important;border-radius:12px!important;overflow:hidden!important;transform:none!important;box-shadow:0 8px 18px rgba(0,0,0,.13)!important;box-sizing:border-box!important;}
  #all-manga-container.catalog-grid>.card .card-cover{width:100%!important;height:auto!important;aspect-ratio:2 / 3!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;overflow:hidden!important;padding:0!important;box-sizing:border-box!important;background:#0b0d10!important;}
  #all-manga-container.catalog-grid>.card .card-cover img{width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;display:block!important;object-fit:cover!important;object-position:center center!important;transform:none!important;filter:none!important;transition:none!important;image-rendering:auto!important;}
  #all-manga-container.catalog-grid>.card .card-info{width:100%!important;height:124px!important;min-height:124px!important;max-height:124px!important;padding:9px 9px 8px!important;display:grid!important;grid-template-rows:30px 32px 32px!important;row-gap:7px!important;box-sizing:border-box!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(15,16,20,.99),rgba(9,10,13,.99))!important;}
  #all-manga-container.catalog-grid>.card .manga-title{width:100%!important;height:30px!important;min-height:30px!important;max-height:30px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:12px!important;font-weight:900!important;line-height:1.3!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;direction:ltr!important;}
  #all-manga-container.catalog-grid>.card .rating-container{width:100%!important;height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) 66px!important;align-items:center!important;gap:7px!important;box-sizing:border-box!important;direction:rtl!important;}
  #all-manga-container.catalog-grid>.card .rating-number{min-width:0!important;max-width:none!important;width:100%!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:8.5px!important;line-height:1.3!important;color:#c8c6bf!important;font-weight:800!important;}
  #all-manga-container.catalog-grid>.card .latest-rating{width:66px!important;min-width:66px!important;height:32px!important;min-height:32px!important;max-height:32px!important;padding:0 4px!important;border-radius:8px!important;font-size:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;line-height:1!important;text-align:center!important;box-sizing:border-box!important;}
  #all-manga-container.catalog-grid>.card .latest-rating .mal-label{display:block!important;line-height:1!important;}
  #all-manga-container.catalog-grid>.card .catalog-card-bottom{width:100%!important;height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:stretch!important;gap:6px!important;box-sizing:border-box!important;}
  #all-manga-container.catalog-grid>.card .catalog-card-bottom>*{height:32px!important;min-height:32px!important;max-height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}
  #all-manga-container.catalog-grid>.card .catalog-card-bottom .chapter-num{width:100%!important;min-width:0!important;margin:0!important;padding:0 7px!important;border-radius:8px!important;font-size:8px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  #all-manga-container.catalog-grid>.card .catalog-type{min-width:44px!important;padding:0 5px!important;font-size:8px!important;line-height:1.2!important;white-space:nowrap!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  #all-manga-container.catalog-grid>.card:hover{transform:none!important;box-shadow:0 8px 18px rgba(0,0,0,.13)!important;}
  #all-manga-container.catalog-grid>.card:hover .card-cover img{transform:none!important;filter:none!important;}
  #all-manga-container.catalog-grid>.card::after{display:none!important;}

  /* Never alter actual artwork on touch screens. */
  .card-cover img,.latest-manga-cover img{transform:none!important;filter:none!important;transition:none!important;image-rendering:auto!important;}
}

@media (max-width:380px){
  .latest-manga-card{grid-template-columns:minmax(0,1fr) 138px!important;height:207px!important;min-height:207px!important;max-height:207px!important;}
  .latest-manga-cover{width:138px!important;height:207px!important;min-width:138px!important;min-height:207px!important;max-height:207px!important;}
  .latest-manga-body{height:207px!important;min-height:207px!important;max-height:207px!important;padding:11px 9px!important;}
  .latest-manga-meta{gap:7px!important;margin-bottom:8px!important;}
  .latest-manga-meta h3{font-size:11px!important;height:30px!important;min-height:30px!important;max-height:30px!important;}
  .latest-manga-meta p{font-size:7.5px!important;height:16px!important;}
  .latest-rating{width:59px!important;min-width:59px!important;height:31px!important;min-height:31px!important;max-height:31px!important;font-size:8px!important;}
  .latest-chapter-list{gap:5px!important;}
  .latest-chapter-link{height:32px!important;min-height:32px!important;max-height:32px!important;padding:5px 7px!important;}
  .latest-chapter-link span{font-size:8px!important;}
  .latest-chapter-link small{font-size:7px!important;}

  #all-manga-container.catalog-grid{column-gap:11px!important;row-gap:14px!important;}
  #all-manga-container.catalog-grid>.card .card-info{height:118px!important;min-height:118px!important;max-height:118px!important;padding:8px 8px 7px!important;grid-template-rows:28px 30px 30px!important;row-gap:7px!important;}
  #all-manga-container.catalog-grid>.card .manga-title{height:28px!important;min-height:28px!important;max-height:28px!important;font-size:10.5px!important;}
  #all-manga-container.catalog-grid>.card .rating-container{height:30px!important;min-height:30px!important;max-height:30px!important;grid-template-columns:minmax(0,1fr) 61px!important;gap:5px!important;}
  #all-manga-container.catalog-grid>.card .rating-number{height:30px!important;min-height:30px!important;max-height:30px!important;font-size:8px!important;}
  #all-manga-container.catalog-grid>.card .latest-rating{width:61px!important;min-width:61px!important;height:30px!important;min-height:30px!important;max-height:30px!important;font-size:7.5px!important;}
  #all-manga-container.catalog-grid>.card .catalog-card-bottom{height:30px!important;min-height:30px!important;max-height:30px!important;gap:5px!important;}
  #all-manga-container.catalog-grid>.card .catalog-card-bottom>*{height:30px!important;min-height:30px!important;max-height:30px!important;}
  #all-manga-container.catalog-grid>.card .catalog-card-bottom .chapter-num{font-size:7.5px!important;padding:0 6px!important;}
  #all-manga-container.catalog-grid>.card .catalog-type{font-size:7.5px!important;min-width:42px!important;}
}

@media (prefers-reduced-motion:reduce){
  .latest-manga-card,.latest-manga-card *,.catalog-grid .card,.catalog-grid .card *{transition:none!important;animation:none!important;}
}


/* FINAL MOBILE CARD GEOMETRY — long English titles get a stable two-line slot. */
@media (max-width:700px){
  #all-manga-container.catalog-grid>.card .card-info{
    min-height:136px!important;
    height:136px!important;
    max-height:136px!important;
    padding:10px 8px 9px!important;
    display:grid!important;
    grid-template-rows:40px 32px 30px!important;
    row-gap:7px!important;
    align-content:center!important;
    box-sizing:border-box!important;
  }
  #all-manga-container.catalog-grid>.card .manga-title{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    white-space:normal!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:11px!important;
    line-height:1.35!important;
    margin:0!important;
  }
  #all-manga-container.catalog-grid>.card .rating-container{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    margin:0!important;
  }
  #all-manga-container.catalog-grid>.card .catalog-card-bottom{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    margin:0!important;
  }
  #all-manga-container.catalog-grid>.card .catalog-card-bottom>*{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }
}

@media (max-width:380px){
  #all-manga-container.catalog-grid>.card .card-info{
    min-height:134px!important;
    height:134px!important;
    max-height:134px!important;
    grid-template-rows:40px 31px 29px!important;
    row-gap:6px!important;
  }
  #all-manga-container.catalog-grid>.card .manga-title{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    font-size:10.5px!important;
  }
}

/* Account page: when Firebase reports a signed-in user, only the dashboard remains visible. */
@media (max-width:700px){
  .account-page .auth-view[style*="display: none"]{display:none!important;}
  .account-page .dashboard-view[style*="display: block"]{display:block!important;}
}