/* NoirPlay V24 — Visual Experience */

/* ---------- Global visual language ---------- */
:root{
  --v24-panel-shadow:0 18px 48px rgba(0,0,0,.14);
  --v24-panel-shadow-strong:0 28px 72px rgba(0,0,0,.22);
  --v24-ring:0 0 0 1px rgba(255,255,255,.02) inset;
}
html[data-theme="light"]{
  --v24-panel-shadow:0 14px 34px rgba(20,28,38,.08);
  --v24-panel-shadow-strong:0 22px 56px rgba(20,28,38,.11);
  --v24-ring:0 0 0 1px rgba(10,18,28,.02) inset;
}
body{
  font-size:14px;
  line-height:1.5;
}
.eyebrow{
  font-size:10px;
  letter-spacing:.13em;
}
.site-header button svg,
.site-header .language-globe svg,
.action-icon svg,
.theater-toggle svg,
.comment-action-icon svg,
.comment-more-toggle svg,
.np-control svg,
.np-center-play svg,
.np-skip-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.menu-toggle svg{width:20px;height:20px}
.search button svg{width:19px;height:19px}
.language-globe{
  display:inline-grid;
  place-items:center;
}
.language-globe svg{width:16px;height:16px}
.theme-icon{
  display:inline-grid;
  place-items:center;
}
.theme-icon svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}

/* ---------- Home ---------- */
.home-main{gap:24px}
.home-hero{
  min-height:310px!important;
  grid-template-columns:minmax(0,1.25fr) minmax(250px,.55fr)!important;
  padding:0!important;
  border-radius:24px!important;
}
.home-hero-copy{
  padding:36px 40px!important;
}
.home-hero-copy>p{
  max-width:720px!important;
  font-size:13px!important;
  line-height:1.7!important;
}
.home-hero h1{
  max-width:760px!important;
  font-size:clamp(34px,4.2vw,56px)!important;
}
.home-hero-actions{
  margin-top:14px!important;
}
.home-primary-action{
  min-height:46px!important;
  padding-inline:20px!important;
  border-radius:12px!important;
  box-shadow:0 14px 30px rgba(229,9,20,.16);
}
.home-feature-pills{
  margin-top:14px!important;
}
.home-feature-pills span{
  min-height:34px;
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:10px!important;
}
.home-feature-pills i{
  min-width:18px;
  margin-right:0!important;
  text-align:center;
  font-size:10px;
}
.home-hero-side{
  display:flex;
  align-items:stretch;
  padding:24px 28px 24px 0!important;
}
.home-overview-card{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface-2) 92%,transparent);
  box-shadow:var(--v24-panel-shadow);
  backdrop-filter:blur(12px);
}
.home-compact-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.home-compact-stats article{
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:13px;
  background:var(--surface);
}
.home-compact-stats span{
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.home-compact-stats b{
  font-size:28px;
  line-height:1;
  letter-spacing:-.05em;
}
.home-hero-note{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border-radius:12px;
  background:var(--surface);
}
.home-hero-note div{min-width:0}
.home-hero-note b,
.home-hero-note small{display:block}
.home-hero-note b{font-size:10px}
.home-hero-note small{
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
  white-space:normal;
}
.home-section,
.home-catalog-panel{
  border-color:var(--line-soft)!important;
  border-radius:20px!important;
  box-shadow:none!important;
}
.home-section-head h2{
  font-size:25px!important;
}
.home-section-head p{
  font-size:11px!important;
}
.home-section-head>a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:9px;
  background:var(--surface-2);
  font-size:10px!important;
}
.home-section-head>a:hover{background:var(--surface-3)}
.home-featured-grid,
.home-catalog-panel .video-grid{
  gap:22px 16px!important;
}

/* ---------- Video cards ---------- */
.video-card{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.video-card:hover{
  transform:none!important;
  box-shadow:none!important;
}
.video-thumb{
  border-radius:14px!important;
  border-color:var(--line-soft)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.10)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.video-card:hover .video-thumb{
  transform:translateY(-3px);
  border-color:rgba(229,9,20,.22)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.18)!important;
}
.video-thumb::after{
  background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,.08) 48%,transparent 72%)!important;
}
.video-card h3{
  margin:10px 2px 0!important;
  font-size:14px!important;
  line-height:1.38!important;
}
.video-meta{
  margin:6px 2px 0!important;
  font-size:10px!important;
}
.badge{
  border-radius:6px!important;
  font-size:9px!important;
}
.duration{
  padding:4px 7px!important;
  border-radius:6px!important;
  backdrop-filter:blur(6px);
}
.preview-status{
  left:9px!important;
  bottom:9px!important;
  min-height:25px;
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:8px!important;
}
.video-thumb:not(.preview-active):not(.preview-loading) .preview-status{
  opacity:0!important;
}
.video-thumb.preview-active .preview-status,
.video-thumb.preview-loading .preview-status{
  opacity:1!important;
}

/* ---------- Watch / player ---------- */
.watch-page>.container{
  width:min(1540px,calc(100% - 36px));
}
.watch-page-head{
  min-height:58px;
  margin-bottom:0!important;
  padding:10px 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.watch-page-head-copy p{
  font-size:10px!important;
}
.watch-layout-single .watch-main{
  display:grid;
  gap:14px;
}
.player-shell{
  border-radius:18px!important;
  border-color:var(--line-soft)!important;
  box-shadow:var(--v24-panel-shadow-strong)!important;
}
.player-topline{
  min-height:46px!important;
  display:flex;
  align-items:center;
  gap:8px;
  padding-inline:15px!important;
}
.player-topline>[data-player-status]{
  font-size:10px;
}
.player-source-name{
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
}
.theater-toggle{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-left:4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.04);
  color:#d7d9dc;
}
.theater-toggle:hover,
.theater-toggle.active{
  border-color:rgba(229,9,20,.34);
  background:rgba(229,9,20,.11);
  color:#fff;
}
.player-stage{background:#000}
.source-dock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px!important;
}
.source-dock-copy{
  flex:0 0 auto;
}
.source-dock-copy strong{font-size:11px!important}
.source-dock-copy span{font-size:9px!important}
.source-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}
.source-button{
  min-width:126px;
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:8px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:7px 10px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:11px!important;
  background:#15171a!important;
  color:#e9ebee!important;
  text-align:left;
}
.source-button.active{
  border-color:rgba(255,255,255,.18)!important;
  background:#1f2227!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
}
.source-state-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#69717d;
  box-shadow:0 0 0 3px rgba(105,113,125,.10);
}
.source-button.source-loading .source-state-dot{
  background:#d3a54a;
  box-shadow:0 0 0 3px rgba(211,165,74,.12);
}
.source-button.source-ready .source-state-dot{
  background:#52c978;
  box-shadow:0 0 0 3px rgba(82,201,120,.12);
}
.source-button.source-error .source-state-dot{
  background:#e25a64;
  box-shadow:0 0 0 3px rgba(226,90,100,.12);
}
.source-button-copy{min-width:0}
.source-button-copy b,
.source-button-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.source-button-copy b{font-size:10px}
.source-button-copy small{
  margin-top:1px;
  color:#8e96a1;
  font-size:8px;
}
.video-info-card{
  padding:18px 20px!important;
  border-radius:16px!important;
  border-color:var(--line-soft)!important;
  box-shadow:none!important;
}
.video-heading-row{
  display:block!important;
}
.watch-title{
  max-width:1100px;
  margin:0 0 10px!important;
  font-size:clamp(24px,2.2vw,34px)!important;
}
.watch-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px!important;
  color:var(--muted);
  font-size:10px;
}
.watch-meta .meta-pill{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
}
.watch-views{
  margin:0!important;
  min-height:28px!important;
  padding:4px 8px!important;
  border-color:var(--line-soft)!important;
  background:var(--surface-2)!important;
  font-size:9px!important;
}
.quick-actions{
  display:flex!important;
  flex-wrap:wrap;
  gap:7px!important;
  margin:14px 0 12px!important;
}
.action-button{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  padding:7px 11px!important;
  border:1px solid var(--line-soft)!important;
  border-radius:10px!important;
  background:var(--surface-2)!important;
  box-shadow:none!important;
  color:var(--muted);
}
.action-button:hover{
  color:var(--text);
  background:var(--surface-3)!important;
}
.action-button.active{
  border-color:rgba(229,9,20,.28)!important;
  background:rgba(229,9,20,.08)!important;
  color:#ee737a;
}
.action-icon{
  display:grid;
  place-items:center;
}
.action-icon svg{
  width:16px;height:16px;
}
.watch-tags{
  gap:6px!important;
}
.watch-tags a{
  padding:6px 9px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:9px;
}
.watch-tags a:hover{
  color:var(--text);
  background:var(--surface-2);
}
.video-note{
  margin-top:12px!important;
  padding:9px 11px!important;
  border:1px solid rgba(229,9,20,.18)!important;
  border-radius:10px!important;
  background:rgba(229,9,20,.055)!important;
}
.video-note p{font-size:9px!important}

/* Theater mode */
body.np-theater-mode .site-header,
body.np-theater-mode .side-menu,
body.np-theater-mode .menu-overlay,
body.np-theater-mode .watch-page-head,
body.np-theater-mode .video-info-card,
body.np-theater-mode .more-like-this,
body.np-theater-mode .comments-card,
body.np-theater-mode .site-footer{
  display:none!important;
}
body.np-theater-mode{
  overflow-y:auto;
  background:#050505;
}
body.np-theater-mode .watch-page{
  padding:0!important;
}
body.np-theater-mode .watch-page>.container{
  width:100%;
  max-width:none;
}
body.np-theater-mode .watch-layout,
body.np-theater-mode .watch-main{
  display:block!important;
}
body.np-theater-mode .player-shell{
  min-height:100vh;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.np-theater-mode .player-stage{
  display:grid;
  place-items:center;
  min-height:calc(100vh - 106px);
}
body.np-theater-mode .player,
body.np-theater-mode .player.direct-video{
  width:100%!important;
  max-width:none!important;
  max-height:calc(100vh - 106px)!important;
  aspect-ratio:auto;
}
body.np-theater-mode .player iframe,
body.np-theater-mode .player video{
  width:100%!important;
  height:min(82vh,calc(100vh - 106px))!important;
  max-height:none!important;
  object-fit:contain!important;
}
body.np-theater-mode .theater-toggle{
  position:relative;
  z-index:4;
}

/* Custom player icon consistency */
.noir-custom-player .np-control{
  min-width:34px;
  min-height:34px;
  display:inline-grid;
  place-items:center;
}
.noir-custom-player .np-control svg{
  width:17px;height:17px;
}
.noir-custom-player .np-skip{
  grid-auto-flow:column;
  gap:2px;
}
.noir-custom-player .np-skip-icon{
  display:grid;
  place-items:center;
}
.noir-custom-player .np-skip b{
  font-size:8px;
}
.noir-custom-player .np-quality-icon{
  display:grid;
  place-items:center;
}
.noir-custom-player .np-quality-icon svg{
  width:15px;height:15px;
}
.noir-custom-player .np-pip svg,
.noir-custom-player .np-fullscreen svg{
  width:18px;height:18px;
}
.noir-custom-player .np-center-play span{
  display:grid;
  place-items:center;
}
.noir-custom-player .np-center-play svg{
  width:26px;height:26px;
  fill:currentColor;
  stroke:none;
}

/* Discover more */
.more-like-this{
  margin-top:0!important;
  padding:20px;
  border:1px solid var(--line-soft);
  border-radius:18px;
  background:var(--surface);
}
.section-head-modern{
  margin-bottom:16px;
}
.section-head-modern h2{
  font-size:23px;
}
.more-like-this .video-grid{
  gap:20px 14px;
}

/* Community */
.comments-card{
  margin-top:0!important;
  padding:20px!important;
  border-radius:18px!important;
  border-color:var(--line-soft)!important;
  box-shadow:none!important;
}
.comments-head h2{font-size:23px}
.comments-count{
  min-height:28px!important;
  padding:5px 9px!important;
  font-size:9px!important;
}
.comment-form{
  padding:10px!important;
  border-radius:13px!important;
}
.comment-form input{
  min-height:42px!important;
  font-size:11px;
}
.comment-form .btn{
  min-height:40px;
  font-size:10px;
}
.comment{
  position:relative;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
}
.comment-mini-avatar{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  font-size:10px!important;
}
.comment-user b{font-size:10px!important}
.comment-user span{font-size:9px!important}
.comment-copy>p{
  margin-top:5px;
  font-size:11px!important;
  line-height:1.6;
}
.comment-actions{
  gap:4px!important;
}
.comment-actions>button,
.comment-more-toggle{
  min-height:29px!important;
  padding:5px 7px!important;
  border-radius:8px!important;
  color:var(--muted)!important;
  font-size:9px!important;
}
.comment-actions>button:hover,
.comment-more-toggle:hover{
  color:var(--text)!important;
  background:var(--surface-2)!important;
}
.comment-action-icon{
  display:grid;
  place-items:center;
}
.comment-action-icon svg{
  width:14px;height:14px;
}
.comment-thread{
  position:relative;
}
.comment-reply{
  position:relative;
  margin-left:44px!important;
  padding-left:18px!important;
}
.comment-reply::before{
  content:"";
  position:absolute;
  left:1px;
  top:-8px;
  bottom:8px;
  width:1px;
  background:var(--line);
}
.comment-more{
  position:relative;
  margin-left:auto;
}
.comment-more-toggle{
  width:30px;
  display:grid;
  place-items:center;
  border:0!important;
  background:transparent!important;
}
.comment-more-toggle svg{width:16px;height:16px}
.comment-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 5px);
  z-index:20;
  min-width:120px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.comment-menu button{
  width:100%;
  padding:7px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  text-align:left;
  font-size:9px;
}
.comment-menu button:hover{
  background:var(--surface-2);
  color:var(--text);
}
.comment-menu button.danger:hover{
  color:#ef737a;
  background:rgba(229,9,20,.07);
}
.comment-reply-banner button{
  display:grid;
  place-items:center;
}
.comment-reply-banner button svg{
  width:14px;height:14px;
}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .home-hero{
    grid-template-columns:minmax(0,1fr) 260px!important;
  }
  .home-featured-grid,
  .home-catalog-panel .video-grid,
  .more-like-this .video-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .source-dock{
    align-items:flex-start;
    flex-direction:column;
  }
  .source-buttons{
    justify-content:flex-start;
  }
}
@media(max-width:900px){
  .home-hero{
    grid-template-columns:1fr!important;
  }
  .home-hero-side{
    padding:0 24px 24px!important;
  }
  .home-overview-card{
    max-width:520px;
  }
  .home-featured-grid,
  .home-catalog-panel .video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  body{font-size:13px}
  .container{width:min(100% - 22px,var(--max))}
  .home-hero{
    border-radius:18px!important;
  }
  .home-hero-copy{
    padding:26px 20px!important;
  }
  .home-hero h1{
    font-size:clamp(32px,10vw,42px)!important;
  }
  .home-feature-pills{
    display:grid;
    grid-template-columns:1fr;
  }
  .home-hero-side{
    padding:0 14px 14px!important;
  }
  .home-section,
  .home-catalog-panel{
    padding:16px!important;
  }
  .watch-page>.container{
    width:100%;
  }
  .watch-page-head{
    padding-inline:14px!important;
  }
  .player-shell{
    border-radius:0!important;
  }
  .player-topline{
    padding-inline:12px!important;
  }
  .source-dock{
    padding:10px 12px!important;
  }
  .source-buttons{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
  }
  .source-button{
    min-width:132px;
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  .video-info-card{
    margin-inline:10px;
    padding:15px!important;
    border-radius:14px!important;
  }
  .quick-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .action-button{
    width:100%;
    justify-content:center;
  }
  .more-like-this,
  .comments-card{
    margin-inline:10px!important;
    padding:16px!important;
  }
  .more-like-this .video-grid{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto;
    padding:2px 2px 10px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
  }
  .more-like-this .video-card{
    flex:0 0 min(76vw,300px);
    scroll-snap-align:start;
  }
  .comment-form{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .comment-avatar{
    display:none!important;
  }
  .comment-reply{
    margin-left:22px!important;
    padding-left:14px!important;
  }
}
@media(max-width:520px){
  .home-featured-grid,
  .home-catalog-panel .video-grid{
    grid-template-columns:1fr;
  }
  .home-compact-stats{
    grid-template-columns:1fr 1fr;
  }
  .home-compact-stats article{
    min-height:74px;
  }
  .home-compact-stats b{
    font-size:24px;
  }
  .home-section-head{
    align-items:flex-start!important;
  }
  .watch-page-head-copy{display:none}
  .player-source-name{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .quick-actions{
    grid-template-columns:1fr 1fr;
  }
  .comments-head{
    align-items:flex-start!important;
  }
}


/* V25 — Mobile fullscreen orientation for self-hosted video */
.noir-custom-player{
  --fullscreen-video-max-width:100%;
  background:#000;
}
.noir-custom-player.orientation-portrait{
  --fullscreen-video-max-width:min(100%,calc(100vh * 9 / 16));
}
.noir-custom-player.orientation-landscape{
  --fullscreen-video-max-width:100%;
}

/* The video always preserves its real aspect ratio. */
.noir-custom-player video{
  object-fit:contain!important;
  object-position:center center!important;
  background:#000;
}

/* Standard Fullscreen API */
.noir-custom-player:fullscreen{
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  background:#000!important;
}
.noir-custom-player:fullscreen video{
  width:100%!important;
  height:100%!important;
  max-width:var(--fullscreen-video-max-width)!important;
  max-height:100%!important;
  margin:auto;
  object-fit:contain!important;
}
.noir-custom-player:fullscreen.orientation-portrait video{
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  aspect-ratio:9 / 16;
}
.noir-custom-player:fullscreen.orientation-landscape video{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto;
}
.noir-custom-player:fullscreen .np-controls{
  width:100%;
}
.noir-custom-player:fullscreen.orientation-portrait .np-controls{
  max-width:min(100%,620px);
  left:50%;
  transform:translateX(-50%);
}
.noir-custom-player:fullscreen.orientation-portrait .np-loading,
.noir-custom-player:fullscreen.orientation-portrait .np-center-play{
  left:50%;
}

/* WebKit native/fullscreen fallbacks */
.noir-custom-player:-webkit-full-screen{
  width:100%!important;
  height:100%!important;
  background:#000!important;
}
.noir-custom-player:-webkit-full-screen video,
.noir-custom-player video:-webkit-full-screen{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#000!important;
}

/* Explicit orientation classes also improve the embedded player before fullscreen. */
@media(max-width:760px),(pointer:coarse){
  .noir-custom-player.orientation-portrait:not(:fullscreen){
    width:min(100%,520px)!important;
    margin-inline:auto;
    aspect-ratio:9 / 16!important;
    max-height:78vh!important;
  }
  .noir-custom-player.orientation-portrait:not(:fullscreen) video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .noir-custom-player.orientation-landscape:not(:fullscreen){
    width:100%!important;
    aspect-ratio:16 / 9!important;
  }

  .noir-custom-player:fullscreen .np-control-row{
    padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
  .noir-custom-player:fullscreen.orientation-portrait .np-volume{
    max-width:70px;
  }
  .noir-custom-player:fullscreen.orientation-portrait .np-time{
    font-size:9px;
  }
}

/* These media queries describe the physical screen after a successful lock. */
@media(orientation:portrait){
  .noir-custom-player:fullscreen.orientation-portrait{
    --fullscreen-video-max-width:min(100vw,calc(100vh * 9 / 16));
  }
}
@media(orientation:landscape){
  .noir-custom-player:fullscreen.orientation-landscape{
    --fullscreen-video-max-width:100vw;
  }
}