/* Fringe responsive polish — mobile-first visual density + device scaling, 2026-07-13.
   Keep existing brand/colors/player behavior; only adjust layout, sizing, and overflow. */
:root{
  --fn-page-pad:clamp(10px,3vw,18px);
  --fn-card-pad:clamp(11px,3vw,16px);
  --fn-radius-lg:clamp(16px,4vw,24px);
  --fn-radius-md:clamp(12px,3vw,18px);
}
html,body{max-width:100%!important;overflow-x:hidden!important}
body{background:radial-gradient(circle at 50% -8%,rgba(92,74,190,.18),transparent 34%),#070b14!important}
img,iframe,video{max-width:100%!important}
.wrap,main{width:min(100% - calc(var(--fn-page-pad) * 2),1180px)!important;margin-inline:auto!important;padding-left:0!important;padding-right:0!important}

/* Branded header: still prominent, but no longer consumes half of a phone screen. */
.site-top-shell{
  width:100%!important;
  max-width:none!important;
  padding:clamp(8px,2.5vw,18px) var(--fn-page-pad) clamp(8px,2vw,12px)!important;
  gap:clamp(8px,2.2vw,13px)!important;
  background:linear-gradient(180deg,rgba(7,11,20,.98) 0%,rgba(7,11,20,.9) 74%,rgba(7,11,20,0) 100%)!important;
}
#top-banner.brand-banner,#top-banner.banner{
  width:min(76vw,420px)!important;
  max-width:420px!important;
  height:clamp(58px,17vw,96px)!important;
  min-height:0!important;
  max-height:96px!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
}
#top-banner .banner-logo-fill,#top-banner.brand-banner .banner-logo-fill{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Navigation scales cleanly from small phones to desktop. */
.nav{
  width:min(100%,920px)!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(6px,1.8vw,12px)!important;
  margin:0 auto!important;
}
.nav .chip{
  min-width:0!important;
  min-height:clamp(34px,9vw,44px)!important;
  padding:clamp(7px,2vw,11px) clamp(5px,1.8vw,12px)!important;
  border-radius:clamp(12px,3vw,18px)!important;
  font-size:clamp(10.5px,2.8vw,15px)!important;
  line-height:1.12!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Section and card hierarchy: less chrome, more content. */
.top-videos,#top-videos,#top-viewed{
  margin:clamp(8px,2vw,18px) 0 clamp(16px,3vw,24px)!important;
  padding:clamp(12px,3vw,20px)!important;
  border-radius:var(--fn-radius-lg)!important;
  background:linear-gradient(160deg,rgba(31,18,39,.95),rgba(14,23,43,.98))!important;
}
.top-videos h2{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  font-size:clamp(1.35rem,6vw,2.25rem)!important;
  line-height:1.05!important;
  letter-spacing:-.04em!important;
}
.divider{margin:clamp(8px,2vw,12px) 0 clamp(12px,2.5vw,18px)!important;height:1px!important;opacity:.9!important}
.grid{gap:clamp(12px,3vw,22px)!important;align-items:start!important}
article.card,.card{
  min-width:0!important;
  overflow:hidden!important;
  padding:var(--fn-card-pad)!important;
  border-radius:var(--fn-radius-md)!important;
  background:linear-gradient(180deg,#101a34 0%,#0c1429 100%)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.video-preview .preview-holder,.preview-holder,.thumb,.player-wrap{
  border-radius:clamp(12px,3vw,16px)!important;
}
.video-preview .preview-holder{margin-bottom:clamp(10px,2.4vw,14px)!important}

/* Make listings scannable on phones while preserving full content on larger screens. */
.card h3{
  margin:0 0 7px!important;
  font-size:clamp(17px,4.9vw,22px)!important;
  line-height:1.14!important;
  letter-spacing:-.025em!important;
}
.card h3 a{
  color:#9bd8ff!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
}
.card-date,.card-views,.card .muted{
  margin:.15rem 0!important;
  font-size:clamp(12.5px,3.4vw,15px)!important;
  line-height:1.35!important;
}
.video-card-tags,.meta.video-tags{
  gap:6px!important;
  margin:8px 0 4px!important;
}
.video-card-tags .chip,.meta.video-tags .pill,.tag{
  max-width:100%!important;
  padding:5px 8px!important;
  font-size:clamp(10.5px,2.9vw,12px)!important;
  line-height:1.1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.read,.actions a,.watch-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  min-height:42px!important;
  margin-top:10px!important;
  padding:11px 14px!important;
  border-radius:14px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  line-height:1.15!important;
  color:#08150a!important;
  background:linear-gradient(135deg,#8d6cff,#66d9ff)!important;
  box-shadow:0 10px 22px rgba(94,77,255,.28)!important;
}
main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}

@media (max-width:760px){
  .wrap,main{width:min(100% - 18px,720px)!important}
  .grid{grid-template-columns:1fr!important}
  #top-videos,#top-viewed{scroll-margin-top:150px!important}
  .thumb-live{min-height:0!important}
}
@media (max-width:520px){
  .wrap,main{width:min(100% - 14px,560px)!important}
  .site-top-shell{padding-top:6px!important;gap:7px!important}
  #top-banner.brand-banner,#top-banner.banner{
    width:min(72vw,286px)!important;
    height:clamp(54px,16vw,76px)!important;
    max-height:76px!important;
  }
  .top-videos,#top-videos,#top-viewed{padding:11px!important;margin-top:8px!important}
  article.card,.card{padding:10px!important}
  .card h3{font-size:clamp(17px,4.7vw,19px)!important;line-height:1.16!important}
  .video-card-tags .chip:nth-child(n+4){display:none!important}
  .divider{margin:8px 0 11px!important}
}
@media (max-width:360px){
  .nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:320px!important}
  .nav .chip{font-size:12px!important;min-height:36px!important}
  #top-banner.brand-banner,#top-banner.banner{width:min(76vw,260px)!important;height:54px!important}
  .card h3 a{-webkit-line-clamp:2!important}
}
@media (min-width:761px) and (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .card h3 a{-webkit-line-clamp:3!important}
}
@media (min-width:1101px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important}
}