/* OSANIME Anime Detail + Watch UI Polish v109
 * Display-only layout refinement. No player/catalog behavior changes.
 */

/* --------------------------------------------------------------------------
   Shared surface rhythm
   -------------------------------------------------------------------------- */
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro{
  --anime-ui-line:rgba(255,255,255,.075);
  --anime-ui-line-strong:rgba(255,255,255,.12);
  --anime-ui-panel:#0b1629;
  --anime-ui-panel-2:#0e1b30;
  --anime-ui-soft:#111f35;
  --anime-ui-muted:#8190a5;
  --anime-ui-text:#f5f7fb;
  --anime-ui-pink:#ff4f93;
}

/* --------------------------------------------------------------------------
   Anime Detail — tighter hero and cleaner content hierarchy
   -------------------------------------------------------------------------- */
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero{
  min-height:350px!important;
  padding-top:24px!important;
  padding-bottom:28px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero-inner{
  width:min(100%,1280px)!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero-grid{
  grid-template-columns:clamp(155px,13vw,184px) minmax(0,1fr)!important;
  gap:clamp(18px,2.2vw,28px)!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-poster-wrap,
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-poster{
  width:clamp(155px,13vw,184px)!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero-copy h1{
  max-width:820px!important;
  font-size:clamp(27px,2.6vw,39px)!important;
  line-height:1.1!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-description{
  max-width:800px!important;
  margin-top:10px!important;
  line-height:1.62!important;
  -webkit-line-clamp:4!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-tags{
  margin-top:10px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-actions{
  margin-top:13px!important;
}

body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-content{
  width:min(100%,1380px)!important;
  padding-top:16px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-layout{
  grid-template-columns:minmax(0,1fr) 292px!important;
  gap:16px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-main{
  gap:12px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-card{
  padding:16px!important;
  border-radius:13px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.11)!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-section-head{
  margin-bottom:12px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-section-head h2{
  font-size:16px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-section-head p{
  margin-top:3px!important;
  font-size:9.5px!important;
}

/* Detail information is metadata, so three compact columns read better on desktop. */
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-info-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-info-item{
  min-height:54px!important;
  padding:9px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  border-radius:8px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-info-item>span{
  font-size:8px!important;
  letter-spacing:.25px!important;
  text-transform:uppercase!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-info-item>b{
  font-size:10px!important;
  line-height:1.4!important;
}

/* Detail episode browser */
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episodes-head{
  align-items:center!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-summary{
  min-width:84px!important;
  padding:6px 9px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-tools{
  margin-bottom:10px!important;
  align-items:center!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-tools>div{
  width:min(330px,100%)!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-tools input{
  height:38px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-no-episodes,
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-placeholder{
  grid-column:1/-1!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-item{
  min-height:128px!important;
  padding:11px!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  gap:10px!important;
  border-radius:10px!important;
  align-content:start!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-number{
  width:38px!important;
  height:38px!important;
  position:sticky!important;
  top:0!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-copy>b{
  padding-right:2px!important;
  font-size:12px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-bottom{
  margin-top:8px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-quality-list{
  grid-column:1/-1!important;
  min-height:26px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-quality-badge{
  min-height:24px!important;
  padding:0 7px!important;
  max-width:100%!important;
  font-size:8.5px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-quality-badge small{
  font-size:7.5px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-watch-button{
  width:100%!important;
  min-width:0!important;
  min-height:35px!important;
  padding:0 8px!important;
  justify-content:center!important;
  border-radius:8px!important;
  font-size:9.5px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-discussion-button{
  box-shadow:none!important;
}

/* One page scrollbar is cleaner than a second scrollbar inside the sidebar. */
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-sidebar-sticky{
  position:sticky!important;
  top:14px!important;
  max-height:none!important;
  overflow:visible!important;
  gap:9px!important;
  padding-right:0!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-side-card{
  padding:11px!important;
  border-radius:12px!important;
  box-shadow:0 9px 24px rgba(0,0,0,.09)!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-side-head{
  margin-bottom:8px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-side-row,
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-side-list>a{
  min-height:33px!important;
  padding:0 7px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-related-list>a{
  min-height:69px!important;
  grid-template-columns:43px minmax(0,1fr) 10px!important;
  padding:6px!important;
}
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-related-list img,
body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-related-placeholder{
  width:43px!important;
  height:59px!important;
}

/* --------------------------------------------------------------------------
   Anime Watch — balanced player / episode / sidebar composition
   -------------------------------------------------------------------------- */
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-content{
  width:min(100%,1380px)!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-layout{
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:15px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-main{
  gap:11px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-player-card,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episodes-card,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-synopsis-card,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-side-card{
  border-radius:12px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.10)!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-player-card{
  padding:13px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-heading{
  margin-bottom:10px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-heading h1{
  font-size:clamp(18px,1.8vw,25px)!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-screen{
  border-radius:10px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.17)!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-controls{
  margin-top:9px!important;
  padding:8px!important;
  grid-template-columns:102px minmax(0,1fr) 102px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-player-meta{
  margin-top:7px!important;
}

body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episodes-card,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-synopsis-card{
  padding:13px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-section-head{
  margin-bottom:9px!important;
  align-items:center!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-section-head h2{
  font-size:15px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-count{
  min-width:70px!important;
  padding:5px 7px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-tools{
  margin-bottom:9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-tools>div{
  width:min(330px,100%)!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-tools input{
  height:38px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-no-episodes,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-inline-loading{
  grid-column:1/-1!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-item{
  min-height:72px!important;
  padding:9px!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  gap:8px!important;
  border-radius:9px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-number{
  width:36px!important;
  height:36px!important;
  border-radius:8px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-copy b{
  font-size:10px!important;
  line-height:1.35!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-copy small{
  margin-top:3px!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:7.5px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-discussion-count{
  grid-column:3!important;
  grid-row:1!important;
  align-self:start!important;
  min-width:24px!important;
  height:24px!important;
  padding:0 6px!important;
  justify-content:center!important;
  border-radius:7px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-play{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  min-width:64px!important;
  min-height:31px!important;
  padding:0 8px!important;
  justify-content:center!important;
  border-radius:7px!important;
  font-size:7.5px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-item:has(.osanime-watch-episode-discussion-count) .osanime-watch-episode-play{
  grid-row:2!important;
  align-self:end!important;
}

body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-synopsis-card>p{
  line-height:1.68!important;
  font-size:10.5px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-tags{
  gap:5px!important;
}

/* Watch sidebar: no nested scrollbar, smaller related cards. */
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-sidebar-sticky,
body.anime-watch-page.anime-watch-php-page.anime-watch-cinematic-page .osanime-watch-sidebar-sticky{
  position:sticky!important;
  top:14px!important;
  max-height:none!important;
  overflow:visible!important;
  gap:9px!important;
  padding-right:0!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-side-card{
  padding:11px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-side-head{
  margin-bottom:8px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related{
  gap:6px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related>a{
  min-height:72px!important;
  padding:6px!important;
  grid-template-columns:44px minmax(0,1fr) 10px!important;
  gap:8px!important;
  border-radius:8px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related img,
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related-placeholder{
  width:44px!important;
  height:61px!important;
  border-radius:7px!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related b{
  font-size:9px!important;
  line-height:1.35!important;
}
body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related small{
  font-size:7.5px!important;
}

/* --------------------------------------------------------------------------
   Laptop / tablet — move sidebars below before the main column becomes cramped.
   -------------------------------------------------------------------------- */
@media (max-width:1120px){
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-layout,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-layout,
  body.anime-watch-page.anime-watch-php-page.anime-watch-cinematic-page .osanime-watch-layout{
    grid-template-columns:1fr!important;
  }

  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-sidebar-sticky,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-sidebar-sticky,
  body.anime-watch-page.anime-watch-php-page.anime-watch-cinematic-page .osanime-watch-sidebar-sticky{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* --------------------------------------------------------------------------
   Phones / narrow tablets
   -------------------------------------------------------------------------- */
@media (max-width:780px){
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-content{
    padding:12px 12px 24px!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-card{
    padding:12px!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-info-grid,
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-list{
    grid-template-columns:1fr!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-sidebar-sticky,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-sidebar-sticky,
  body.anime-watch-page.anime-watch-php-page.anime-watch-cinematic-page .osanime-watch-sidebar-sticky{
    grid-template-columns:1fr!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-item{
    min-height:0!important;
  }

  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-list,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-related{
    grid-template-columns:1fr!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-controls{
    grid-template-columns:1fr 1fr!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-quality-control{
    grid-column:1/-1!important;
    grid-row:1!important;
  }
}

@media (max-width:520px){
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero{
    padding-top:16px!important;
    padding-bottom:18px!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero-grid{
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:start!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-poster-wrap,
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-poster{
    width:92px!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-hero-copy h1{
    font-size:20px!important;
    line-height:1.16!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-description{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    font-size:10.5px!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-primary{
    grid-column:1/-1!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episodes-head{
    align-items:flex-start!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-summary{
    min-width:64px!important;
  }
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro .anime-detail-episode-bottom{
    grid-template-columns:1fr 1fr!important;
  }

  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-player-card,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episodes-card,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-synopsis-card{
    padding:10px!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-tools{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-tools>div{
    width:100%!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-item{
    min-height:66px!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    padding:8px!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-number{
    width:32px!important;
    height:32px!important;
  }
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro .osanime-watch-episode-play{
    min-width:56px!important;
    min-height:29px!important;
    padding:0 6px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.anime-detail-page.anime-detail-php-page.anime-detail-responsive-pro *,
  body.anime-watch-page.anime-watch-php-page.anime-watch-responsive-pro *{
    scroll-behavior:auto!important;
  }
}