/* STEEL BALL — V13 final polish. Loaded last. */

/* Desktop: fix the authenticated account pill so its content is vertically centered and never visually clipped. */
@media (min-width:701px){
  .header-actions .login-btn{
    min-height:44px!important;
    height:44px!important;
    padding:0 17px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .header-actions .login-btn i,
  .header-actions .login-btn span{
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
  }
}

/* Mobile: give the Steel Ball team mark a little more presence in the header. */
@media (max-width:700px){
  .logo-brand-wrap{transform:translateY(1px)!important;}
  .brand-s-mark{font-size:40px!important;line-height:.76!important;}
  .brand-text-main,.brand-text-gold{font-size:29px!important;line-height:.9!important;}
}
@media (max-width:380px){
  .brand-s-mark{font-size:38px!important;}
  .brand-text-main,.brand-text-gold{font-size:27px!important;}
}

/* Explore page: enlarge each list row and make the cover / metadata hierarchy clearer. */
@media (max-width:700px){
  .explore-page{padding:78px 9px 22px!important;}
  .explore-page-grid{gap:16px!important;}
  .explore-page-column{padding:14px!important;border-radius:16px!important;}
  .explore-page-column h2{
    font-size:14px!important;
    margin:0 0 11px!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
  }
  .explore-page-list{gap:10px!important;}
  .explore-page-item{
    min-height:118px!important;
    grid-template-columns:32px 86px minmax(0,1fr)!important;
    gap:10px!important;
    padding:9px!important;
    border-radius:12px!important;
    align-items:center!important;
  }
  .explore-page-item img{
    width:86px!important;height:104px!important;
    max-width:86px!important;max-height:104px!important;
    border-radius:9px!important;object-fit:cover!important;
  }
  .explore-page-rank{width:29px!important;height:29px!important;border-radius:8px!important;font-size:10px!important;}
  .explore-page-copy{
    min-width:0!important;gap:6px!important;
    justify-content:center!important;align-self:stretch!important;
  }
  .explore-page-copy strong{
    font-size:11.5px!important;line-height:1.6!important;
    -webkit-line-clamp:2!important;
  }
  .explore-page-copy .explore-meta-line,
  .explore-page-copy small{
    font-size:9.4px!important;line-height:1.65!important;
    -webkit-line-clamp:2!important;
  }
}
@media (max-width:380px){
  .explore-page-item{min-height:110px!important;grid-template-columns:30px 78px minmax(0,1fr)!important;gap:8px!important;padding:8px!important;}
  .explore-page-item img{width:78px!important;height:96px!important;max-width:78px!important;max-height:96px!important;}
  .explore-page-copy strong{font-size:10.7px!important;}
  .explore-page-copy .explore-meta-line,
  .explore-page-copy small{font-size:8.8px!important;}
}

/* Reader: one real app-like full-width bar, not a floating card. */
.reader-page-spacer{height:68px!important;}
.reader-controls,
body.reader-bar-fixed .reader-controls,
body.reader-bar-dynamic .reader-controls{
  position:fixed!important;
  inset:0 0 auto 0!important;
  top:0!important;left:0!important;right:0!important;
  width:100%!important;
  min-height:66px!important;height:auto!important;
  margin:0!important;
  padding:8px 16px!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid rgba(226,184,87,.16)!important;
  background:rgba(9,11,14,.98)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.45)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  box-sizing:border-box!important;
  z-index:3000!important;
}
.reader-controls .manga-info{
  min-width:190px!important;flex:1 1 auto!important;
  display:flex!important;align-items:center!important;
  justify-content:flex-start!important;gap:10px!important;
  overflow:hidden!important;
}
.reader-controls .manga-info h2{
  min-width:0!important;max-width:34vw!important;margin:0!important;
  font-size:15px!important;line-height:1.25!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.reader-controls .reader-bar-chapter{
  flex:0 0 auto!important;min-width:auto!important;
  padding:6px 9px!important;
  border:1px solid rgba(226,184,87,.14)!important;
  border-radius:8px!important;background:rgba(255,255,255,.035)!important;
  font-size:10px!important;white-space:nowrap!important;
}
.reader-controls .controls-wrapper{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;
  gap:8px!important;min-width:0!important;
}
.reader-controls .custom-dropdown{min-width:132px!important;flex:0 0 132px!important;}
.reader-controls .dropdown-trigger{min-height:38px!important;padding:7px 28px 7px 10px!important;font-size:11px!important;}
.reader-controls .nav-buttons{display:flex!important;align-items:center!important;gap:6px!important;}
.reader-controls .nav-buttons button,
.reader-controls .nav-buttons a,
.reader-controls .mobile-back-container .dynamic-back{
  min-height:38px!important;height:38px!important;padding:0 11px!important;
  border-radius:8px!important;font-size:10px!important;line-height:1!important;white-space:nowrap!important;
}
.reader-controls .reader-settings-wrap{position:relative!important;inset:auto!important;flex:0 0 auto!important;}
.reader-controls .reader-settings-toggle{width:38px!important;height:38px!important;border-radius:9px!important;font-size:17px!important;}
.reader-controls .reader-settings{top:46px!important;bottom:auto!important;right:0!important;width:280px!important;z-index:3100!important;}
body.reader-bar-hidden .reader-controls{display:none!important;}
body.reader-bar-dynamic.reader-scrolling-down .reader-controls{transform:translateY(-105%)!important;opacity:0!important;pointer-events:none!important;}

@media (max-width:700px){
  .reader-page-spacer{height:114px!important;}
  .reader-controls,
  body.reader-bar-fixed .reader-controls,
  body.reader-bar-dynamic .reader-controls{
    min-height:104px!important;
    padding:7px 9px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-rows:40px 44px!important;
    column-gap:7px!important;row-gap:6px!important;
    align-items:center!important;
  }
  .reader-controls .manga-info{grid-column:1/3!important;grid-row:1!important;width:100%!important;min-width:0!important;gap:6px!important;}
  .reader-controls .manga-info h2{max-width:none!important;flex:1 1 auto!important;font-size:11px!important;}
  .reader-controls .reader-bar-chapter{font-size:8px!important;padding:5px 7px!important;}
  .reader-controls .controls-wrapper{
    grid-column:1/4!important;grid-row:2!important;width:100%!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:5px!important;
  }
  .reader-controls .custom-dropdown{min-width:0!important;width:100%!important;flex:1 1 auto!important;}
  .reader-controls .dropdown-trigger{min-height:36px!important;height:36px!important;font-size:9px!important;padding:6px 24px 6px 8px!important;}
  .reader-controls .nav-buttons{gap:4px!important;}
  .reader-controls .nav-buttons button,
  .reader-controls .nav-buttons a,
  .reader-controls .mobile-back-container .dynamic-back{
    height:36px!important;min-height:36px!important;padding:0 8px!important;font-size:8px!important;
  }
  .reader-controls .mobile-back-container{display:block!important;}
  .reader-controls .reader-settings-wrap{grid-column:3!important;grid-row:1!important;}
  .reader-controls .reader-settings-toggle{width:36px!important;height:36px!important;font-size:16px!important;}
  .reader-controls .reader-settings{top:43px!important;right:0!important;width:min(272px,calc(100vw - 18px))!important;}
}

/* Mobile reader: flatten the control wrapper so every control becomes a deliberate grid item. */
@media (max-width:700px){
  .reader-controls .controls-wrapper{display:contents!important;}
  .reader-controls .custom-dropdown{
    grid-column:1!important;
    grid-row:2!important;
    align-self:center!important;
  }
  .reader-controls .nav-buttons{
    grid-column:2!important;
    grid-row:2!important;
    align-self:center!important;
  }
  .reader-controls .mobile-back-container{
    grid-column:3!important;
    grid-row:2!important;
    align-self:center!important;
    display:block!important;
  }
  .reader-controls .reader-settings-wrap{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:end!important;
  }
}