/* NOW ENJOY - home page styles */
html,
body {
  background:#050307;
  color:#e2e8f0;
  font-family:'Outfit',sans-serif;
  margin:0;
  padding:0;
  min-height:100vh;
  overflow-x:hidden;
}

.gothic-frame {
  position:relative;
  background:linear-gradient(145deg,#120814f2,#08030afa);
  border:2px solid #ff0033;
  border-radius:18px;
  backdrop-filter:blur(12px);
}

.gothic-frame:before,
.gothic-frame:after {
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border:3px solid #ff2a55;
  pointer-events:none;
  z-index:2;
}

.gothic-frame:before {
  top:-5px;
  left:-5px;
  border-right:0;
  border-bottom:0;
}

.gothic-frame:after {
  bottom:-5px;
  right:-5px;
  border-left:0;
  border-top:0;
}

.shimmer-text {
  background:linear-gradient(90deg,#ff1a40 0%,#fff 50%,#ff1a40 100%);
  background-size:200% auto;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  animation:textShimmer 3.5s linear infinite;
}

@keyframes textShimmer {
to{background-position:200% 0}
}

.gothic-input {
  background:#0f0712d9;
  border:1px solid #ff003359;
  color:#fff;
  transition:all .3s;
  min-width:0;
}

.gothic-input:focus {
  outline:none;
  border-color:#ff0033;
  box-shadow:0 0 15px #ff003399;
  background:#190a1cf2;
}

#particles-canvas {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:1;
}

::-webkit-scrollbar {
  width:8px;
}

::-webkit-scrollbar-track {
  background:#050307;
}

::-webkit-scrollbar-thumb {
  background:#800014;
  border-radius:4px;
}

::-webkit-scrollbar-thumb:hover {
  background:#ff0033;
}

.alert {
  padding:.7rem;
  border-radius:.6rem;
  background:#4a000b99;
  border:1px solid #ff0033;
  color:#fecdd3;
  font-size:12px;
  margin-bottom:1rem;
}

.nav-btn {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.7rem .8rem;
  border-radius:.75rem;
  font:600 11px 'Orbitron',sans-serif;
  color:#9ca3af;
  transition:.2s;
  text-align:left;
}

.nav-btn i {
  color:#ff2a55;
}

.nav-btn:hover {
  color:white;
  background:#4a000b99;
  border:1px solid #ff003380;
}

.content-grid {
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:1rem;
}

@media(min-width:640px) {
  .content-grid {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1.25rem;
      }
}

@media(min-width:1024px) {
  .content-grid {
      grid-template-columns:repeat(3,minmax(0,1fr));
      }
}

@media(min-width:1280px) {
  #videoCardsContainer.content-grid {
      grid-template-columns:repeat(4,minmax(0,1fr));
      }
}

.media-card {
  padding:.75rem;
  cursor:pointer;
  transition:.2s;
  min-width:0;
}

.media-card:hover {
  border-color:#ff2a55;
  transform:translateY(-2px);
}

.media-card img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:.7rem;
  background:#000;
}

.media-card h3 {
  font:700 .85rem 'Cinzel',serif;
  color:#fff;
  margin-top:.65rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.media-card p {
  font:10px 'Orbitron',sans-serif;
  color:#9ca3af;
  margin-top:.35rem;
}

@media(prefers-reduced-motion:reduce) {
  *,
    *::before,
    *::after {
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      scroll-behavior:auto!important;
      transition-duration:.01ms!important;
      }
}

#ageVerification {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 0, 5, 0.96);
  backdrop-filter: blur(12px);
}

#ageVerification.hidden {
  display: none;
}

.age-box {
  width: 100%;
  max-width: 440px;
  padding: 32px 24px;
  text-align: center;
  background: #0d070f;
  border: 1px solid #ff0033;
  border-radius: 18px;
  box-shadow:
                0 0 25px rgba(255, 0, 51, 0.2),
                inset 0 0 20px rgba(255, 0, 51, 0.04);
  animation: agePopupIn 0.35s ease-out;
}

.age-icon {
  color: #ff0033;
  font-size: 42px;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 10px rgba(255, 0, 51, 0.5));
}

.age-title {
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 25px;
  font-weight: 900;
  margin-bottom: 14px;
}

.age-message {
  color: #c9c2cc;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 25px;
}

.age-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.age-btn {
  width: 100%;
  padding: 13px 16px;
  border-radius: 9px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.age-yes {
  color: white;
  background: #cc0028;
  border: 1px solid #ff2a55;
}

.age-yes:hover {
  background: #ff0033;
  box-shadow: 0 0 18px rgba(255, 0, 51, 0.35);
  transform: translateY(-1px);
}

.age-no {
  color: #d5cbd5;
  background: transparent;
  border: 1px solid #51404c;
}

.age-no:hover {
  color: white;
  background: #24101b;
  border-color: #ff0033;
}

.age-note {
  color: #746875;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  margin-top: 20px;
}

@keyframes agePopupIn {
            from {
                opacity: 0;
                transform: scale(0.94) translateY(10px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        
}

body.age-locked {
  overflow: hidden;
}


/* ---- Video / Playlist tabs + category filter ---- */
.view-tabs {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.view-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: .75rem;
  background: #0d070f;
  border: 1px solid #4a000b;
  color: #9ca3af;
  font: 600 11px 'Orbitron', sans-serif;
  cursor: pointer;
  transition: .2s;
}

.view-tab i {
  color: #ff2a55;
}

.view-tab:hover {
  color: #fff;
  border-color: #ff003380;
}

.view-tab.active {
  color: #fff;
  border-color: #ff0033;
  background: #4a000b66;
  box-shadow: 0 0 14px #ff0033b3, inset 0 0 8px #ff003340;
}

.filter-wrap {
  position: relative;
}

.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #ff0033;
  color: #fff;
  font-size: 9px;
}

.filter-count.hidden {
  display: none;
}

.filter-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 30;
  min-width: 13rem;
  padding: .6rem;
  background: #0d070f;
  border: 1px solid #ff0033;
  border-radius: .85rem;
  box-shadow: 0 0 20px #ff003366;
}

.filter-menu.hidden {
  display: none;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: .5rem;
  color: #e2e8f0;
  font-size: 12px;
  cursor: pointer;
}

.filter-option:hover {
  background: #4a000b66;
}

.filter-option input {
  accent-color: #ff0033;
  width: 1rem;
  height: 1rem;
}

.filter-clear {
  width: 100%;
  margin-top: .4rem;
  padding: .5rem;
  border-top: 1px solid #27272a;
  color: #ff2a55;
  font: 600 10px 'Orbitron', sans-serif;
}

.filter-clear:hover {
  color: #fff;
}