/* ============================================================
   NoirPlay V35 — Visual Experience / Player Studio
   ============================================================ */

:root{
  --v35-panel:color-mix(in srgb,var(--surface) 94%,transparent);
  --v35-soft:color-mix(in srgb,var(--surface-2) 88%,transparent);
  --v35-shadow:0 22px 70px rgba(0,0,0,.22);
  --v35-edge:color-mix(in srgb,var(--line) 88%,transparent);
}

/* Cleaner content rhythm */
main{scrollbar-gutter:stable both-edges}
.home-main,.watch-page{animation:v35-page-in .28s ease both}
@keyframes v35-page-in{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}

.home-hero{
  border-radius:26px!important;
  border-color:var(--v35-edge)!important;
  background:
    radial-gradient(circle at 88% 14%,color-mix(in srgb,var(--red) 19%,transparent),transparent 32%),
    radial-gradient(circle at 67% 120%,color-mix(in srgb,var(--red-2) 8%,transparent),transparent 31%),
    linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface-2) 86%,var(--surface)))!important;
}
.home-hero h1{max-width:760px;text-wrap:balance}
.home-hero-actions .btn{
  min-height:44px!important;
  border-radius:11px!important;
}
.home-overview-card{
  border-radius:17px!important;
  border-color:var(--v35-edge)!important;
}
.home-overview-grid article{
  border-radius:11px!important;
  transition:transform .16s ease,border-color .16s ease;
}
@media(hover:hover){
  .home-overview-grid article:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--red) 24%,var(--line))!important;
  }
}

.home-section,
.home-catalog-panel{
  border-radius:18px!important;
  border-color:var(--v35-edge)!important;
}
.home-section-head{
  padding-inline:2px;
}
.home-section-head h2{
  font-size:clamp(20px,2vw,27px)!important;
}
.home-section-head p{max-width:650px}

/* Cards: more editorial, less boxed */
.video-card{
  border-radius:14px!important;
}
.video-thumb{
  background:#08090b!important;
  box-shadow:0 10px 28px rgba(0,0,0,.14)!important;
}
.video-card h3{
  font-weight:820!important;
  letter-spacing:-.016em!important;
}
.video-card .video-meta{
  color:var(--muted-2)!important;
}
.video-thumb.preview-active{
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--red) 34%,transparent),
    0 16px 44px rgba(0,0,0,.24)!important;
}

/* Search results and categories */
.search-hero,
.category-hero{
  border-radius:20px!important;
  border-color:var(--v35-edge)!important;
  background:
    radial-gradient(circle at 90% 15%,color-mix(in srgb,var(--red) 12%,transparent),transparent 30%),
    var(--surface)!important;
}
.search-summary,
.category-related{
  border-radius:13px!important;
}

/* ============================================================
   PLAYER / WATCH — V35
   ============================================================ */
.watch-page{
  padding-bottom:46px!important;
}
.watch-page::before{
  opacity:.20!important;
  filter:blur(54px) saturate(.92)!important;
}
.watch-layout{
  align-items:start!important;
  gap:18px!important;
}
.player-shell{
  overflow:visible!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:#050506!important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.018) inset!important;
}
.player-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,color-mix(in srgb,var(--red) 30%,transparent),transparent 30%,transparent 72%,color-mix(in srgb,var(--red) 12%,transparent));
  opacity:.5;
  pointer-events:none;
}
.player-topline{
  min-height:44px!important;
  padding:0 11px!important;
  border-radius:19px 19px 0 0!important;
  background:linear-gradient(180deg,#16171b,#0e0f12)!important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.player-topline [data-player-status]{
  font-size:8px!important;
  font-weight:800;
  letter-spacing:.015em;
}
.player-source-name{
  margin-left:auto!important;
  padding:4px 7px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#d8d9dd!important;
}
.live-dot{
  width:7px!important;height:7px!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent),0 0 18px color-mix(in srgb,var(--red) 36%,transparent);
}
.theater-toggle{
  width:33px!important;height:33px!important;
  margin-left:5px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.035)!important;
}
.theater-toggle:hover{background:rgba(255,255,255,.09)!important}

.player-stage{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.022),transparent 42%),
    #000!important;
}
.player-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  box-shadow:inset 0 0 70px rgba(0,0,0,.44);
}
.player{
  min-height:320px!important;
}
.player-placeholder{
  gap:10px!important;
}
.player-placeholder-icon{
  width:68px!important;height:68px!important;
  border-color:rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}

/* Custom direct-video player */
.noir-custom-player{
  background:#000!important;
}
.noir-custom-player video{
  object-fit:contain;
}
.np-center-play{
  width:76px!important;height:76px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(8,9,11,.72)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.52),0 0 0 7px rgba(255,255,255,.025)!important;
}
.np-center-play:hover{
  background:color-mix(in srgb,var(--red) 88%,#111)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.52),0 0 0 8px color-mix(in srgb,var(--red) 12%,transparent)!important;
}
.np-controls{
  padding:70px 16px 13px!important;
  background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.62) 44%,transparent)!important;
}
.np-progress-wrap{margin-bottom:11px!important}
.np-progress-track{
  height:5px!important;
  background:rgba(255,255,255,.22)!important;
  transition:height .12s ease,transform .12s ease!important;
}
.np-progress-track:hover{
  height:7px!important;
  transform:translateY(-1px);
}
.np-played-bar{
  background:linear-gradient(90deg,var(--red),var(--red-2))!important;
  box-shadow:0 0 14px color-mix(in srgb,var(--red) 32%,transparent)!important;
}
.np-control-row{
  gap:3px!important;
  min-height:40px!important;
}
.np-control{
  border-radius:9px!important;
}
.np-control:hover{
  background:rgba(255,255,255,.105)!important;
}
.np-play{
  width:43px!important;
  background:rgba(255,255,255,.055)!important;
}
.np-speed,
.np-quality{
  min-height:34px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.045)!important;
}
.np-quality-menu,
.np-speed-menu{
  border-radius:13px!important;
  background:rgba(14,15,18,.965)!important;
  box-shadow:0 24px 68px rgba(0,0,0,.54)!important;
  backdrop-filter:blur(18px)!important;
}
.np-quality-menu button,
.np-speed-menu button{
  border-radius:8px!important;
}
.np-loading{
  width:58px!important;height:58px!important;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,8,10,.72)!important;
}

/* Source chooser becomes a proper source rail */
.source-dock{
  gap:13px!important;
  padding:12px!important;
  border-radius:0 0 19px 19px;
  background:linear-gradient(180deg,#101114,#0b0c0e)!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
}
.source-dock-copy{
  min-width:134px!important;
}
.source-dock-copy strong{
  font-size:10px!important;
  letter-spacing:.01em;
}
.source-dock-copy span{
  font-size:7px!important;
  color:#74777e!important;
}
.source-buttons{gap:6px!important}
.source-button{
  position:relative;
  min-height:36px!important;
  padding:7px 11px!important;
  border-radius:9px!important;
  border-color:rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.045)!important;
  color:#aeb0b6!important;
}
.source-button:hover{
  border-color:rgba(255,255,255,.19)!important;
  background:rgba(255,255,255,.075)!important;
}
.source-button.active{
  border-color:color-mix(in srgb,var(--red) 42%,rgba(255,255,255,.09))!important;
  background:color-mix(in srgb,var(--red) 12%,rgba(255,255,255,.04))!important;
  color:#fff!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--red) 16%,transparent)!important;
}
.source-button.active::before{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 14%,transparent);
}

/* Info block */
.video-info-card{
  margin-top:14px!important;
  padding:18px 19px!important;
  border-radius:17px!important;
  border-color:var(--v35-edge)!important;
  background:var(--v35-panel)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.09)!important;
}
.watch-title{
  font-size:clamp(23px,2.3vw,33px)!important;
  line-height:1.14!important;
  letter-spacing:-.035em!important;
}
.watch-meta{
  gap:7px!important;
  margin-top:11px!important;
}
.watch-meta>span,
.watch-views{
  min-height:28px;
  margin-top:0!important;
  padding:5px 8px!important;
  border:1px solid var(--line-soft)!important;
  border-radius:8px!important;
  background:var(--surface-2)!important;
}
.quick-actions{
  margin-top:15px!important;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.action-button{
  min-height:40px!important;
  border-radius:10px!important;
  padding:7px 11px!important;
}
.action-icon{
  border-radius:7px!important;
}
.watch-tags{margin-top:13px!important}
.watch-tags a{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border-radius:8px!important;
  padding:5px 8px!important;
}
.video-note{
  padding:11px!important;
  border:1px solid var(--line-soft)!important;
  border-radius:10px!important;
  background:var(--surface-2);
}

/* Related column */
.watch-related-panel{
  border-radius:17px!important;
  border-color:var(--v35-edge)!important;
  background:var(--v35-panel)!important;
}
.watch-related-head{
  padding-bottom:12px!important;
}
.watch-related-list .video-card{
  grid-template-columns:118px minmax(0,1fr)!important;
  border-radius:10px!important;
}
.watch-related-list .video-card:hover{
  border-color:color-mix(in srgb,var(--red) 20%,var(--line))!important;
}
.watch-related-count{
  color:var(--text)!important;
}

/* Comments */
.comments-card{
  border-radius:17px!important;
  border-color:var(--v35-edge)!important;
  background:var(--v35-panel)!important;
}
.comment-form{
  border-radius:12px!important;
}
.comment{
  padding-block:14px!important;
}
.comment-actions button{
  border-radius:8px!important;
}

/* Theater */
body.theater-mode .watch-layout{
  grid-template-columns:minmax(0,1fr)!important;
}
body.theater-mode .watch-side{
  display:none!important;
}
body.theater-mode .player-shell{
  width:min(1560px,calc(100vw - 30px));
  margin-inline:auto;
}
body.theater-mode .player{
  max-height:82vh!important;
}

/* Mobile player */
@media(max-width:760px){
  .watch-page{padding-bottom:24px!important}
  .watch-page-head{padding-top:12px!important}
  .player{
    min-height:0!important;
  }
  .player-shell{
    border-radius:0!important;
    box-shadow:0 18px 48px rgba(0,0,0,.26)!important;
  }
  .player-shell::before{display:none}
  .player-topline{
    min-height:38px!important;
    border-radius:0!important;
    padding-inline:10px!important;
  }
  .player-source-name{max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .source-dock{
    border-radius:0!important;
    padding:9px 10px 10px!important;
  }
  .source-dock-copy{display:none!important}
  .source-buttons{
    width:100%;
    gap:6px!important;
  }
  .source-button{
    min-height:34px!important;
    flex:0 0 auto;
  }
  .np-controls{padding:48px 7px 7px!important}
  .np-progress-wrap{margin-bottom:6px!important}
  .np-center-play{width:62px!important;height:62px!important}
  .np-control{min-width:32px!important;height:34px!important;padding-inline:4px!important}
  .np-skip{min-width:39px!important}
  .np-quality,.np-speed{min-width:40px!important}
  .np-quality-menu,.np-speed-menu{
    position:fixed!important;
    left:9px!important;right:9px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-height:55vh;
    overflow:auto;
  }
  .video-info-card,
  .comments-card,
  .more-like-this{
    margin-inline:10px!important;
  }
  .video-info-card{padding:14px!important}
  .watch-title{font-size:21px!important}
  .quick-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .action-button{
    min-width:0!important;
    min-height:50px!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:3px!important;
    padding:6px 3px!important;
    font-size:7px!important;
  }
  .action-icon{width:20px!important;height:20px!important}
}
@media(max-width:420px){
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .watch-meta{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:2px}
  .watch-meta>*{flex:0 0 auto}
}

/* Smooth but restrained */
@media(prefers-reduced-motion:no-preference){
  .source-button,.action-button,.theme-toggle,.video-card{
    transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
  }
}