@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ================================
   OSRSTube Custom CSS
   Organized by Page
   ================================ */


/* ================================
   HOMEPAGE
   ================================ */
/* Golden Theme*/

/* Buttons (gold gradient background) */
.btn-main,
.btn-main[type="submit"],
.btn-secondary,
.btn-primary {
  background: linear-gradient(180deg, #FFD700, #DAA520) !important;
  border: 1px solid #b8860b !important;
  color: #111 !important;
  border-radius: 6px !important;
  font-weight: bold !important;
}

.btn-main:hover,
.btn-main[type="submit"]:hover,
.btn-secondary:hover,
.btn-primary:hover {
  background: linear-gradient(180deg, #FFE55C, #E6B800) !important;
  border-color: #b8860b !important;
  color: #111 !important;
}

/* Text accents (links, icons, badges – NO backgrounds) */
.text-primary,
a,
a:focus,
a:hover,
.badge-primary,
.label-primary,
.active {
  color: #FFD700 !important;
  background: none !important; /* Prevent accidental yellow backgrounds */
}

/* Featured Video Title + Font*/

h1 a.black.black-hover,
h1 a.black.black-hover:link,
h1 a.black.black-hover:visited {
  font-family: 'Press Start 2P', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  font-size: 32px !important;
  color: #ffff00 !important; /* OSRS gold */
  -webkit-text-stroke: 1px #000000 !important; /* black outline */
  text-transform: uppercase !important;
  text-shadow: none !important;
  transition: text-shadow 0.25s ease-in-out !important;
}

h1 a.black.black-hover:hover,
h1 a.black.black-hover:active,
h1 a.black.black-hover:focus {
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4) !important,
               0 0 12px rgba(255, 215, 0, 0.3) !important;
}

/* ================================
   LOGIN PAGE
   ================================ */


/* ================================
   REGISTER / SIGNUP PAGE
   ================================ */


/* ================================
   WATCH PAGE (Video Player)
   ================================ */

/* Cyberpunk Neon Glow Effect (Gold ↔ Purple) */
.mejs__container,
.sticky-container__video {
  border: none !important;
  border-radius: 10px;
  overflow: visible !important;

  /* Fade in runs first, breathing starts after 4s */
  animation: neonFadeIn 4s ease-out forwards,
             neonColorShift 12s 4s infinite alternate;
}

/* Fade-in glow (runs only once on load) */
@keyframes neonFadeIn {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: inset 0 0 8px rgba(245,201,8,0.4),
                0 0 18px rgba(245,201,8,0.5),
                0 0 32px rgba(245,201,8,0.35);
  }
}

/* Gold ↔ Purple breathing loop (starts after fade-in) */
@keyframes neonColorShift {
  0% {
    box-shadow: inset 0 0 8px rgba(245,201,8,0.4),
                0 0 18px rgba(245,201,8,0.5),
                0 0 32px rgba(245,201,8,0.35);
  }
  50% {
    box-shadow: inset 0 0 8px rgba(110,103,204,0.4),
                0 0 18px rgba(110,103,204,0.55),
                0 0 32px rgba(110,103,204,0.35);
  }
  100% {
    box-shadow: inset 0 0 8px rgba(245,201,8,0.4),
                0 0 18px rgba(245,201,8,0.5),
                0 0 32px rgba(245,201,8,0.35);
  }
}

/* Center Big Play Button */
.vjs-big-play-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}


/* ================================
   SEARCH RESULTS PAGE
   ================================ */


/* ================================
   TRENDING PAGE
   ================================ */


/* ================================
   CATEGORIES PAGE
   ================================ */


/* ================================
   CHANNEL / PROFILE PAGE (General)
   ================================ */


/* ================================
   CHANNEL / PROFILE PAGE (Specific Creators)
   ================================ */


/* ================================
   PLAYLISTS PAGE
   ================================ */


/* ================================
   HISTORY PAGE
   ================================ */


/* ================================
   LIKED VIDEOS PAGE
   ================================ */


/* ================================
   SUBSCRIPTIONS PAGE
   ================================ */


/* ================================
   UPLOAD / CREATE PAGE
   ================================ */


/* ======================
   Avatar Styles
   ====================== */
/* Avatar container under "Show more" */
.avatar-container {
  display: flex;
  align-items: center;
  justify-content: center; /* start-aligned, since it's swipeable */
  margin: 15px 0;
  gap: 0px;
  overflow-x: auto;  /* 👈 enables horizontal scrolling/swiping */
  overflow-y: hidden; /* disable vertical scroll */
  scrollbar-width: none; /* hide scrollbar in Firefox */
}

.avatar-container::-webkit-scrollbar {
  display: none; /* hide scrollbar in Chrome/Safari */
}

.avatar-icon {
  flex: 0 0 auto; /* 👈 prevents shrinking */
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
}

.avatar-icon:hover {
  transform: scale(1.05);
}

/* Responsive tweak for mobile */
@media (max-width: 768px) {
  .avatar-icon {
    width: 140px;
    height: 140px;
  }
}


/* ================================
   BADGES
   ================================ */

/* Badge bar container */
.badge-bar {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  margin-left: 15px;  
  align-items: center;
  justify-content: center; /* keep badges aligned left */
  position: relative;
  z-index: 5; /* ensure above video controls but below sidebar */
  max-width: 100%; /* prevent spilling into sidebar */
  overflow: hidden; /* cut off if anything tries to escape */
  padding-bottom: 0px; /* 👈 adds a few pixels of bottom padding */
}

/* Desktop overrides */
@media (min-width: 1025px) {
  .badge-bar {
    margin-left: 0;  /* reset to flush with container */
  }
}

/* Individual badges */
.badge-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0; /* prevents shrinking into each other */
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

/* Hover effect per icon */
.badge-icon:hover {
  transform: scale(1.15);
  z-index: 6; /* brings hovered badge above others */
}


/* ================================
   OTHER / CUSTOM PAGES
   ================================ */

/* Reanimated Abyssal Demon NPC - Mobile Only, Homepage Only, below header */
@media (max-width: 768px) {
  body:has(.tag_feat_video_img) #main-container::after {
    content: "";
    position: absolute;   
    top: 370px;           /* same offset as before */
    right: 0;             
    width: 240px;         
    height: 336px;        
    background: url('/themes/playtag/images/reanimatedabby.png') no-repeat top right;
    background-size: contain;
    z-index: 10;          /* under header, above video */
    pointer-events: none;
    opacity: 0.7;
    animation: fadeInYama 1.2s ease-in forwards;
  }
}

/* Reanimated Abyssal Demon NPC - Desktop Only, Homepage Only, below header */
@media (min-width: 769px) {
  body:has(.tag_feat_video_img) #main-container::after {
    content: "";
    position: absolute;   
    top: 200px;           
    right: 0;             
    width: 378px;         /* 150% of original */
    height: 529px;        /* 150% of original */
    background: url('/themes/playtag/images/reanimatedabby.png') no-repeat top right;
    background-size: contain;
    z-index: 10;          /* under header, above video */
    pointer-events: none;
    opacity: 0.95;
    animation: fadeInYama 1.2s ease-in forwards;
  }
}