/* NoriPlay V26 — PC + Mobile optimization */

/* Core responsiveness / performance */
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  min-width:320px;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
img,video,iframe{
  max-width:100%;
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
}
button,.btn,.video-thumb,.action-button,.source-button{
  touch-action:manipulation;
}
.video-card,
.category-visual-card,
.comment-thread{
  content-visibility:auto;
  contain-intrinsic-size:260px;
}

/* ---------- Large desktop / PC ---------- */
@media(min-width:1500px){
  :root{--max:1560px}
  .header-row{
    grid-template-columns:auto auto minmax(360px,820px) auto;
    gap:14px;
  }
  .home-main{gap:28px}
  .home-catalog-panel .video-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  .home-featured-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .more-like-this .video-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  .watch-title{
    font-size:36px!important;
  }
  .video-card h3{
    font-size:14px!important;
  }
}
@media(min-width:1900px){
  :root{--max:1720px}
  .home-catalog-panel .video-grid,
  .more-like-this .video-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  .home-hero{
    min-height:330px!important;
  }
}

/* ---------- Standard desktop / laptop ---------- */
@media(min-width:1181px) and (max-width:1499px){
  .home-catalog-panel .video-grid,
  .more-like-this .video-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media(min-width:901px) and (max-width:1180px){
  .container{
    width:min(var(--max),calc(100% - 28px));
  }
  .home-hero{
    grid-template-columns:minmax(0,1fr) 240px!important;
  }
  .home-hero-copy{
    padding:30px 30px!important;
  }
  .home-catalog-panel .video-grid,
  .home-featured-grid,
  .more-like-this .video-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .watch-page>.container{
    width:min(100% - 28px,1540px)!important;
  }
}

/* ---------- Header ---------- */
@media(max-width:1050px){
  .header-row{
    min-height:64px;
  }
  .header-logo img{
    height:36px;
  }
}
@media(max-width:820px){
  .site-header{
    backdrop-filter:blur(10px);
  }
  .header-row{
    min-height:0;
    grid-template-columns:auto auto minmax(0,1fr);
    padding-top:8px;
    padding-bottom:8px;
  }
  .header-logo{
    padding:2px 5px;
  }
  .search{
    min-height:44px;
    border-radius:11px;
  }
  .search input{
    min-height:44px;
    font-size:16px;
    padding:10px 12px;
  }
  .search button{
    width:48px;
    min-width:48px;
  }
  .header-actions{
    min-width:0;
    gap:5px;
  }
  .theme-toggle,
  .language-toggle,
  .account-pill,
  .auth-register-button{
    min-height:40px;
  }
}
@media(max-width:560px){
  .site-header{
    padding-top:env(safe-area-inset-top);
  }
  .header-row{
    width:calc(100% - 16px)!important;
    grid-template-columns:40px minmax(92px,1fr) auto;
    gap:6px;
  }
  .menu-toggle{
    width:40px!important;
    height:40px!important;
    border-radius:10px;
  }
  .header-logo{
    justify-self:start;
    max-width:132px;
    min-width:0;
  }
  .header-logo img{
    width:auto;
    max-width:100%;
    height:32px!important;
    object-fit:contain;
  }
  .header-actions{
    gap:4px;
  }
  .theme-toggle,
  .language-toggle,
  .account-pill,
  .auth-register-button{
    min-width:40px;
    min-height:40px!important;
    padding:7px!important;
    justify-content:center;
  }
  .language-chevron,
  .theme-label,
  .account-name{
    display:none!important;
  }
  .search{
    grid-column:1/-1;
    width:100%;
  }
  .side-menu{
    top:calc(104px + env(safe-area-inset-top));
    width:min(300px,88vw);
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
  .menu-overlay{
    inset:calc(104px + env(safe-area-inset-top)) 0 0;
  }
}

/* ---------- Home ---------- */
@media(max-width:900px){
  .home-main{gap:18px}
  .home-hero{
    min-height:0!important;
  }
  .home-hero-copy{
    padding:28px 24px!important;
  }
  .home-hero-side{
    padding:0 24px 22px!important;
  }
  .home-overview-card{
    max-width:none!important;
  }
  .home-catalog-panel .video-grid,
  .home-featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:600px){
  .home-main{
    gap:14px;
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  .home-hero{
    margin-top:8px!important;
    border-radius:16px!important;
  }
  .home-hero-copy{
    gap:11px!important;
    padding:22px 17px!important;
  }
  .home-badge{
    padding:7px 10px!important;
  }
  .home-badge b{font-size:9px!important}
  .home-badge small{font-size:7px!important}
  .home-hero h1{
    font-size:clamp(29px,9.3vw,38px)!important;
    line-height:1!important;
  }
  .home-hero-copy>p{
    font-size:12px!important;
    line-height:1.6!important;
  }
  .home-hero-actions .btn{
    width:100%;
    min-height:46px;
    font-size:11px;
  }
  .home-feature-pills{
    gap:6px!important;
  }
  .home-feature-pills span{
    min-height:38px;
    font-size:9px!important;
  }
  .home-hero-side{
    padding:0 12px 12px!important;
  }
  .home-overview-card{
    padding:10px;
    border-radius:14px;
  }
  .home-compact-stats article{
    min-height:70px;
    padding:10px;
  }
  .home-compact-stats b{font-size:23px}
  .home-hero-note small{font-size:8px}
  .home-section,
  .home-catalog-panel{
    padding:14px!important;
    border-radius:16px!important;
  }
  .home-section-head{
    margin-bottom:13px;
  }
  .home-section-head h2{
    font-size:21px!important;
  }
  .home-section-head p{
    font-size:10px!important;
  }
}
@media(max-width:460px){
  .home-catalog-panel .video-grid,
  .home-featured-grid{
    grid-template-columns:1fr!important;
  }
  .video-thumb{
    border-radius:12px!important;
  }
  .video-card h3{
    font-size:13px!important;
  }
}

/* ---------- Cards ---------- */
@media(hover:none),(pointer:coarse){
  .video-card:hover .video-thumb{
    transform:none!important;
  }
  .video-card:hover .video-thumb img{
    transform:none!important;
    filter:none!important;
  }
  .play{
    opacity:.92!important;
    width:42px!important;
    height:42px!important;
    transform:translate(-50%,-50%) scale(.9)!important;
    background:rgba(8,8,8,.64)!important;
  }
}
@media(max-width:760px){
  .video-grid{
    gap:16px 10px!important;
  }
  .video-meta{
    font-size:9px!important;
  }
  .badge,.duration{
    font-size:9px!important;
  }
}

/* ---------- Watch page / player ---------- */
@media(max-width:900px){
  .watch-page{
    padding-top:8px!important;
  }
  .watch-page>.container{
    width:100%!important;
  }
  .watch-page-head{
    width:calc(100% - 24px);
    margin-inline:auto!important;
  }
  .watch-layout{
    gap:10px!important;
  }
  .video-info-card,
  .more-like-this,
  .comments-card{
    margin-inline:12px!important;
  }
  .player-shell{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
}
@media(max-width:760px){
  .player-topline{
    min-height:44px!important;
    padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))!important;
  }
  .player-topline>[data-player-status],
  .player-source-name{
    font-size:9px!important;
  }
  .theater-toggle{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px;
  }
  .source-dock{
    padding:9px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))!important;
  }
  .source-dock-copy{
    width:100%;
  }
  .source-dock-copy strong{
    font-size:10px!important;
  }
  .source-dock-copy span{
    font-size:8px!important;
  }
  .source-buttons{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .source-buttons::-webkit-scrollbar{display:none}
  .source-button{
    min-width:140px!important;
    min-height:46px!important;
  }
  .video-info-card{
    padding:14px!important;
  }
  .watch-title{
    font-size:clamp(21px,7vw,28px)!important;
    line-height:1.14!important;
  }
  .watch-meta{
    gap:7px 9px!important;
    font-size:9px!important;
  }
  .quick-actions{
    gap:6px!important;
  }
  .action-button{
    min-height:44px!important;
    font-size:10px;
  }
  .watch-tags a{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    font-size:9px;
  }
  .more-like-this .video-grid{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none!important;
  }
  .more-like-this .video-grid::-webkit-scrollbar{display:none}
  .comments-card{
    padding:14px!important;
  }
  .comments-head h2,
  .section-head-modern h2{
    font-size:20px!important;
  }
  .comment-form input{
    font-size:16px!important;
  }
  .comment-form .btn{
    min-height:44px;
  }
}
@media(max-width:480px){
  .watch-page-head{
    display:none;
  }
  .player-topline{
    min-height:42px!important;
  }
  .player-source-name{
    max-width:92px!important;
  }
  .video-info-card,
  .more-like-this,
  .comments-card{
    margin-inline:8px!important;
  }
  .video-info-card{
    padding:12px!important;
  }
  .quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .action-button{
    padding:7px 8px!important;
  }
  .more-like-this{
    padding:13px!important;
  }
  .more-like-this .video-card{
    flex-basis:min(82vw,300px)!important;
  }
  .comments-card{
    padding:12px!important;
  }
  .comment-form{
    padding:7px!important;
    gap:6px!important;
  }
  .comment-form input{
    min-width:0;
    padding-inline:10px;
  }
  .comment-reply{
    margin-left:14px!important;
    padding-left:10px!important;
  }
}

/* ---------- Touch player controls ---------- */
@media(pointer:coarse){
  .noir-custom-player .np-control{
    min-width:42px!important;
    width:42px;
    height:42px!important;
    padding:0 5px!important;
  }
  .noir-custom-player .np-skip{
    min-width:46px!important;
    width:46px;
  }
  .noir-custom-player .np-time{
    min-width:48px!important;
    font-size:9px!important;
  }
  .noir-custom-player .np-quality{
    min-width:44px!important;
    width:auto;
    max-width:72px;
  }
  .noir-custom-player .np-quality [data-quality-label]{
    max-width:42px!important;
    font-size:8px;
  }
  .noir-custom-player .np-speed{
    min-width:42px!important;
    width:42px;
  }
  .noir-custom-player .np-volume-btn,
  .noir-custom-player .np-fullscreen{
    min-width:42px!important;
    width:42px;
  }
  .noir-custom-player .np-progress-wrap{
    min-height:22px;
    display:flex;
    align-items:center;
  }
  .noir-custom-player .np-progress{
    min-height:22px;
  }
  .np-quality-menu,
  .np-speed-menu{
    max-height:min(58vh,420px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}
@media(pointer:coarse) and (max-width:560px){
  .noir-custom-player .np-controls{
    padding-left:max(6px,env(safe-area-inset-left))!important;
    padding-right:max(6px,env(safe-area-inset-right))!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
  .noir-custom-player .np-control-row{
    gap:0!important;
  }
  .noir-custom-player .np-quality [data-quality-label]{
    display:none!important;
  }
  .noir-custom-player .np-quality{
    width:42px!important;
  }
  .noir-custom-player .np-time-sep,
  .noir-custom-player [data-total-time]{
    display:none!important;
  }
  .noir-custom-player .np-time{
    min-width:38px!important;
    max-width:44px;
  }
  .noir-custom-player .np-volume{
    display:none!important;
  }
  .noir-custom-player .np-pip{
    display:none!important;
  }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:560px){
  .noir-custom-player:fullscreen .np-controls{
    padding-top:18px!important;
  }
  .noir-custom-player:fullscreen .np-control{
    min-width:38px!important;
    width:38px;
    height:38px!important;
  }
  .noir-custom-player:fullscreen .np-skip{
    min-width:42px!important;
    width:42px;
  }
  .noir-custom-player:fullscreen .np-time{
    min-width:38px!important;
  }
}

/* ---------- Account / auth ---------- */
@media(max-width:760px){
  .auth-modal,
  .save-modal{
    padding:
      max(12px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }
  .auth-dialog,
  .save-dialog{
    width:100%!important;
    max-height:calc(100dvh - 24px);
    border-radius:16px!important;
  }
  .auth-form input,
  .save-create-form input,
  .playlist-create-inline input{
    min-height:44px;
    font-size:16px!important;
  }
  .auth-submit,
  .save-create-form button,
  .playlist-create-inline button{
    min-height:44px;
  }
  .account-page{
    padding-top:16px!important;
  }
  .account-hero,
  .account-section{
    border-radius:14px!important;
  }
  .account-activity-stats{
    gap:6px!important;
  }
}
@media(max-width:480px){
  .account-activity-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .account-playlist-videos{
    grid-template-columns:1fr!important;
  }
}

/* ---------- Accessibility / low-power ---------- */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
@media(max-width:760px){
  .site-header,
  .auth-modal-backdrop,
  .preview-status,
  .np-quality-menu{
    backdrop-filter:none!important;
  }
  .home-hero,
  .home-overview-card,
  .player-shell{
    box-shadow:none!important;
  }
}