/* 2026 HALLOWEEN SKIN - CURSED TAPE */
/* CREATED BY TAFINA & CHE */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ---------- Page ---------- */

html, body {
  background-color: #0b0d12 !important;
}

/* Faint scanlines and a dark vignette over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

body {
  scrollbar-width: thin;
  scrollbar-color: #6b2112 transparent;
}

::-webkit-scrollbar { width: 6px; background-color: transparent; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: #6b2112; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background-color: #ff360c; }

::selection {
  background-color: #a8240a;
  color: #fff;
}

/* ---------- Type ---------- */

.contentTitle, .contentTitle.white, .bigTitle, .boxTitle, .articleHeader .title, .dark .modal-title,
.nav, #header #stats .statbox, .dropdown-menu, .btn, .miniTimetable, .timetableNormal,
.profileBanner .profileNameContainer, .UBbadge, .viga {
  font-family: 'VT323', 'Courier New', monospace;
  letter-spacing: 0.04em;
}

/* Nav stays at the stock size and spacing so the links don't grow
   into the room the player uses when the navbar is scrolled */
.nav {
  font-size: 15px;
  letter-spacing: 0;
}

.dropdown-menu {
  font-size: 18px;
}

.contentTitle {
  font-size: 26px;
  line-height: 1;
  color: #ff360c;
  border-bottom: solid 1px transparent;
  /* Tape colour bleed: red and cyan ghosts either side */
  text-shadow: 2px 0 rgba(255, 42, 42, 0.55), -2px 0 rgba(40, 220, 255, 0.45);
}

.contentTitle.white {
  color: #8a8f99;
  text-shadow: 1px 0 rgba(255, 42, 42, 0.3), -1px 0 rgba(40, 220, 255, 0.25);
}

.contentTitle::after {
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  content: "";
  height: 2px;
  margin: 0 0 0 12px;
  border-radius: 0;
  background: repeating-linear-gradient(to right, rgba(255, 54, 12, 0.45) 0 6px, transparent 6px 10px);
}

.settingsNav .nameContainer .desc, .glassBox.editable, .commentsItem {
  font-family: Viga;
}

/* ---------- Text flicker and signal glitches ---------- */
/*
  Each element runs on a different loop length so they never
  glitch in sync. Hovering anything stops it so it can be read.
*/

/* Titles "tune in" on page load, then tear every so often */
.contentTitle {
  animation:
    ub-tune-in 1.4s steps(1) both,
    ub-title-tear 11s steps(1) 2s infinite;
}

.contentTitle.white {
  animation:
    ub-tune-in 1.4s steps(1) both,
    ub-title-tear 17s steps(1) 4s infinite;
}

.bigTitle, .articleHeader .title {
  animation:
    ub-tune-in 1.6s steps(1) both,
    ub-title-tear 13s steps(1) 3s infinite;
}

@keyframes ub-tune-in {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; transform: translateX(-6px); }
  16%  { opacity: 0.1; }
  28%  { opacity: 1; transform: translateX(4px); text-shadow: 5px 0 rgba(255, 42, 42, 0.8), -5px 0 rgba(40, 220, 255, 0.7); }
  34%  { opacity: 0.3; transform: none; text-shadow: 2px 0 rgba(255, 42, 42, 0.55), -2px 0 rgba(40, 220, 255, 0.45); }
  52%  { opacity: 1; }
  58%  { opacity: 0.5; }
  64%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes ub-title-tear {
  0%   { transform: none; clip-path: none; opacity: 1; }
  94%  { transform: translateX(7px) skewX(-8deg); clip-path: inset(0 0 55% 0); text-shadow: 5px 0 rgba(255, 42, 42, 0.8), -5px 0 rgba(40, 220, 255, 0.7); }
  95%  { transform: translateX(-5px); clip-path: inset(45% 0 0 0); }
  96%  { transform: none; clip-path: none; opacity: 0.2; text-shadow: 2px 0 rgba(255, 42, 42, 0.55), -2px 0 rgba(40, 220, 255, 0.45); }
  97%  { opacity: 1; }
  98%  { opacity: 0.4; }
  99%  { opacity: 1; }
}

/* Now playing text drops out like a weak signal */
.stats-djName {
  animation: ub-signal-drop 7s steps(1) infinite;
}

.stats-song {
  animation: ub-signal-drop 13s steps(1) 2s infinite;
}

.stats-artist, .songProfile .artist {
  animation: ub-signal-drop 19s steps(1) 5s infinite;
}

.beatName .artist, .showImage {
  animation: ub-signal-drop 23s steps(1) 8s infinite;
}

@keyframes ub-signal-drop {
  0%   { opacity: 1; transform: none; }
  88%  { opacity: 0.15; }
  89%  { opacity: 1; transform: translateX(3px); text-shadow: 3px 0 rgba(255, 42, 42, 0.7), -3px 0 rgba(40, 220, 255, 0.6); }
  90%  { opacity: 0.6; transform: translateX(-2px); }
  91%  { opacity: 1; transform: none; text-shadow: 1px 0 rgba(255, 42, 42, 0.5), -1px 0 rgba(40, 220, 255, 0.4); }
  96%  { opacity: 0.3; }
  97%  { opacity: 1; }
}

/* Nav links jolt when you hover them */
.navbar-nav > li > a:hover,
.dropdown-content > a:hover,
.btn-glass:hover:not(.disabled) {
  animation: ub-hover-jolt 0.3s steps(1) 1;
}

@keyframes ub-hover-jolt {
  0%   { transform: translateX(-3px); text-shadow: 3px 0 rgba(255, 42, 42, 0.8), -3px 0 rgba(40, 220, 255, 0.7); }
  33%  { transform: translateX(2px); opacity: 0.5; }
  66%  { transform: none; opacity: 1; }
}

.contentTitle:hover, .bigTitle:hover, .articleHeader .title:hover,
.stats-djName:hover, .stats-song:hover, .stats-artist:hover, .songProfile .artist:hover,
.beatName .artist:hover, .showImage:hover {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .contentTitle, .contentTitle.white, .bigTitle, .articleHeader .title,
  .stats-djName, .stats-song, .stats-artist, .songProfile .artist,
  .beatName .artist, .showImage,
  .navbar-nav > li > a:hover, .dropdown-content > a:hover, .btn-glass:hover:not(.disabled) {
    animation: none !important;
  }
}

/* ---------- Header: the tape ---------- */

#header > .banner > img,
.navbar .blur img,
.navbar .blurBG img {
  display: none;
}

#header {
  position: relative;
  overflow: hidden;
  background-color: #0b0d12 !important;
  background-image:
    linear-gradient(to bottom, transparent 0%, rgba(255, 214, 170, 0.05) 35%, rgba(255, 214, 170, 0.13) 50%, rgba(255, 214, 170, 0.05) 65%, transparent 100%),
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(255, 54, 12, 0.38), rgba(168, 36, 10, 0.12) 55%, transparent 80%),
    radial-gradient(ellipse at 50% 40%, #1f1a17 0%, #0b0d12 75%) !important;
  background-size: 100% 70px, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: ub-tracking 7s linear infinite;
}

/* Rolling tracking band, then a pause before it comes round again */
@keyframes ub-tracking {
  0%   { background-position: 0 -90px, 0 0, 0 0; }
  55%  { background-position: 0 440px, 0 0, 0 0; }
  100% { background-position: 0 440px, 0 0, 0 0; }
}

/* Static and scanlines over the header */
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ub-static 0.6s steps(4) infinite;
}

@keyframes ub-static {
  0%   { background-position: 0 0, 0 0; }
  25%  { background-position: 0 0, -60px 40px; }
  50%  { background-position: 0 0, 80px -30px; }
  75%  { background-position: 0 0, -30px -70px; }
  100% { background-position: 0 0, 0 0; }
}

/* Camcorder on-screen display, bottom left of the header */
#header::after {
  content: "REC  SP\A OCT 31 1998   AM 3:33";
  white-space: pre;
  position: absolute;
  left: 28px;
  bottom: 62px;
  z-index: 2;
  pointer-events: none;
  padding-left: 20px;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: #e8e8e4;
  text-shadow: 2px 0 rgba(255, 42, 42, 0.5), -2px 0 rgba(40, 220, 255, 0.4), 0 0 8px rgba(0, 0, 0, 0.9);
  background: radial-gradient(circle, #ff2a2a 0 5px, transparent 6px) no-repeat 0 5px / 12px 12px;
  animation: ub-rec-blink 1.2s steps(1) infinite, ub-osd-flicker 5s steps(1) infinite;
}

@keyframes ub-osd-flicker {
  0%   { opacity: 1; transform: none; }
  70%  { opacity: 0.4; }
  71%  { opacity: 1; transform: translateX(4px); }
  72%  { transform: none; }
  90%  { opacity: 0; }
  92%  { opacity: 1; }
}

@keyframes ub-rec-blink {
  0%   { background-size: 12px 12px; }
  50%  { background-size: 0 0; }
}

@media (max-width: 767px) {
  #header::after {
    font-size: 17px;
    left: 14px;
    bottom: 54px;
  }
}

/* The logo jolts every few seconds, like a bad splice */
#header .logoContainer .logo {
  z-index: 1;
  animation: ub-splice 9s steps(1) infinite;
}

@keyframes ub-splice {
  0%   { transform: none; filter: none; }
  90%  { transform: translate(-6px, 2px) skewX(-4deg); filter: drop-shadow(4px 0 rgba(255, 42, 42, 0.8)) drop-shadow(-4px 0 rgba(40, 220, 255, 0.7)); }
  91%  { transform: translate(5px, -1px); filter: drop-shadow(-3px 0 rgba(255, 42, 42, 0.8)) drop-shadow(3px 0 rgba(40, 220, 255, 0.7)); }
  92%  { transform: translate(-2px, 0); filter: invert(1); }
  93%  { transform: none; filter: none; }
}

#header .logoContainer .logoTop {
  background-image: url(../_images_/LogoTopWhite.png) !important;
  opacity: 0.9;
}

#header .logoContainer .logoBottom {
  background-image: url(../_images_/LogoBottomWhite.png) !important;
  opacity: 0.9;
}

#header #visualizer {
  mix-blend-mode: normal !important;
  opacity: 0.2 !important;
  box-shadow: none !important;
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-12deg) contrast(1.3) brightness(1.1);
}

#header > .bottom {
  background: rgba(0, 0, 0, 0.55) !important;
  box-shadow: inset 0 1px 0 0 rgba(232, 232, 228, 0.08);
}

#header .visualizerToggle .checkbox {
  color: #e8e8e4;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.4) !important;
  border-radius: 0 !important;
}

.stats-djName {
  color: #ff360c;
  text-shadow: 1px 0 rgba(255, 42, 42, 0.5), -1px 0 rgba(40, 220, 255, 0.4);
}

.stats-song, .stats-artist, .songProfile .artist {
  color: #8a8f99;
}

@media (prefers-reduced-motion: reduce) {
  #header, #header::before, #header::after, #header .logoContainer .logo {
    animation: none !important;
  }
}

/* ---------- Navbar and dropdowns ---------- */

.navbar-inverse {
  background: #07080b !important;
  box-shadow: inset 0 -1px 0 0 rgba(232, 232, 228, 0.08);
}

@media (max-width: 1049px) {
  .navbar .blur {
    background: #0b0d12 !important;
  }
}

.navbar .dropdown-menu .dropdown-content .blurBG {
  background-color: #a8240a !important;
}

.dropdown-menu .dropdown-content {
  background: #a8240a !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  border-radius: 0 !important;
}

.dropdown-content > a,
.dropdown-content > a:active,
.dropdown-content > a:visited,
.dropdown-content > a:focus,
#logoutButton {
  font-size: 19px;
  color: #ffffff;
  display: inline-block;
  width: 100%;
  padding: 0 15px;
  margin: 0 0 3px 0;
  text-decoration: none;
}

.dropdown-content > a:hover, #logoutButton:hover {
  color: #a8240a;
  background-color: #ffffff;
}

.dropdown-content > a:hover::before, #logoutButton:hover::before {
  content: "\25B6  ";
}

.dropdown-menu .dropdown-content .divider {
  background-color: rgba(255, 255, 255, 0.35);
  height: 1px;
  margin: 5px 0 8px 0;
}

/* ---------- Flat panels ---------- */

.banner {
  background-color: #0b0d12;
  background-image: radial-gradient(ellipse 70% 60% at 50% 115%, rgba(255, 54, 12, 0.3), transparent 75%), radial-gradient(ellipse at 50% 30%, #1f1a17 0%, #0b0d12 75%);
}

.banner > img {
  display: none;
}

.blur, .blurBG, #contentBG {
  display: none;
}

.sliderFeatured .blurBG,
.topSong .blurBG,
.changeBanner .blurBG,
.changeBackground .blurBG,
.articleHeader .blurBG,
.contentBox.leaderboardTopDJ .blurBG {
  display: block;
}

.glassBox, .contentBox {
  color: #8a8f99;
  background-color: #14171d;
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.35);
  border-radius: 0;
}

.glassBox::before, .contentBox::before {
  display: none;
}

.profilePage .glassBox,
.glassBox.shadow {
  background-color: #14171d;
}

.now.glassBox, .next.glassBox, .later.glassBox {
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.1);
}

.profileCoverContainer {
  border-radius: 0;
}

/* Photos look like paused frames: slightly washed and cold */
.newsContainer .newsImage, .allNewsContainer .newsItem .newsImage, #imageSliderContainer .slider .slide, .profileCoverContainer {
  filter: saturate(0.6) contrast(1.1);
}

.newsContainer .newsImage::before,
.allNewsContainer .newsItem .newsImage::before {
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.12), inset 0 0 40px 6px rgba(0, 0, 0, 0.6);
}

.comments .commentsItem {
  position: relative;
  padding: 6px;
  color: #a4a9b2;
  background-color: #14171d;
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.06);
  border-radius: 0;
  font-size: 12px;
  margin: 0 0 20px 0;
  z-index: 1;
}

.comments .arrowContainer {
  display: none;
}

#imageSliderContainer .slider .slide {
  background-color: #14171d;
}

#imageSlider > div::before, .communityAdvertising #itemModal div::before {
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.08);
}

.discordOnlineBox .discordTitle {
  mix-blend-mode: normal;
  opacity: 0.8;
}

.graphBar div {
  background-color: rgba(255, 54, 12, 0.3);
}

/* ---------- Mini timetable: whoever is live is recording ---------- */

.miniTimetable div .miniTimetableItem:nth-child(1) .glassBox {
  box-shadow: inset 0 0 0 1px #ff2a2a, 0 0 14px 0 rgba(255, 42, 42, 0.35);
}

.miniTimetable div .miniTimetableItem:nth-child(1) .glassBox .dj {
  color: #ff2a2a !important;
}

.miniTimetable div .miniTimetableItem:nth-child(1) .glassBox .dj::before {
  content: "\25CF  ";
  animation: ub-rec-dot 1.2s steps(1) infinite;
}

@keyframes ub-rec-dot {
  50% { opacity: 0; }
}

.miniTimetable div .miniTimetableItem:nth-child(2) .glassBox,
.miniTimetable div .miniTimetableItem:nth-child(3) .glassBox {
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.18);
}

.miniTimetable div .miniTimetableItem:nth-child(2) .glassBox .dj,
.miniTimetable div .miniTimetableItem:nth-child(3) .glassBox .dj {
  color: #ff7a5c !important;
}

@media (prefers-reduced-motion: reduce) {
  .miniTimetable div .miniTimetableItem:nth-child(1) .glassBox .dj::before {
    animation: none;
  }
}

/* ---------- Tabs and buttons ---------- */

.glassTabs > li > a:last-child,
.glassTabs > li > a:hover,
.settingsNav > li > a:last-child,
.settingsNav > li > a:hover {
  color: #a4a9b2;
  background-color: #14171d !important;
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.08) !important;
  border-radius: 0;
}

.glassTabs > li.active > a, .glassTabs > li.active > a:hover,
.settingsNav > li.active > a, .settingsNav > li.active > a:hover {
  color: #ffffff !important;
  background-color: #a8240a !important;
}

.btn-glass {
  color: #e8e8e4 !important;
  border: none !important;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.4) !important;
  border-radius: 0 !important;
  font-family: 'VT323', 'Courier New', monospace !important;
  font-size: 18px;
  letter-spacing: 0.08em;
  transition: none;
}

.btn-glass:hover:not(.disabled),
.btn-glass:focus:not(.disabled),
.btn-glass.active,
li.active .btn-glass {
  color: #ffffff !important;
  background-color: #a8240a !important;
  box-shadow: inset 0 0 0 1px #a8240a !important;
  text-shadow: 1px 0 rgba(255, 42, 42, 0.6), -1px 0 rgba(40, 220, 255, 0.5);
}

.btn-glass:focus-visible, a:focus-visible {
  outline: 2px solid #e8e8e4 !important;
  outline-offset: 2px;
}

/* ---------- Modals and forms ---------- */

.modal .modal-content,
.modal-dialog > .dark {
  background-color: #0f1116 !important;
  border: solid 1px rgba(232, 232, 228, 0.2);
  border-radius: 0;
}

.modal-content {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important;
}

.dark .modal-title {
  color: #ff360c;
  font-size: 32px;
  text-shadow: 2px 0 rgba(255, 42, 42, 0.55), -2px 0 rgba(40, 220, 255, 0.45);
}

.form-control.dark {
  background-color: #07080b;
  border: solid 1px rgba(232, 232, 228, 0.15) !important;
  border-radius: 0;
  color: #e8e8e4;
}

textarea.form-control:focus.dark {
  border-color: #a8240a !important;
  outline: 0;
  box-shadow: 0 0 0 1px #a8240a;
}

.input-group, .textarea-container,
.input-group .form-control.dark, .form-control[readonly] {
  box-shadow: none !important;
}

.input-group {
  border-radius: 0;
}

.form-group.active .input-group,
.form-group.active .textarea-container {
  box-shadow: 0 0 0 1px #a8240a !important;
}

.form-group.active .input-group .form-control.dark {
  outline: 0;
  box-shadow: -1px 0 0 0 #a8240a !important;
}

.input-group-addon.dark {
  background-color: #14171d;
  color: #e8e8e4;
  border: solid 1px rgba(232, 232, 228, 0.15) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

.form-group .checkbox {
  background-color: #07080b;
  border: 1px solid rgba(232, 232, 228, 0.2);
  border-radius: 0;
  box-shadow: none;
}

.UBhovercard {
  background-color: #0f1116;
}

/* ---------- Avatars ---------- */

.footer .footerTop .currentlyOnline .avatar::before,
.likeLeaderboard .first .avatar::before,
.likeLeaderboard .smallList .avatar::before,
.recentlyPlayed .recentlyPlayedItem .art::before,
.staffList .avatar::before,
.onlineStaff .avatar::before,
.navbar-nav .dropdown-toggle .accountNavBG div::before {
  box-shadow: inset 0 0 0 1.5px rgba(232, 232, 228, 0.12);
}

.profileBanner .profileVIP {
  text-shadow: 0 0 15px rgba(0, 0, 0, 1);
  box-shadow: inset 0 0 0 1px rgba(232, 232, 228, 0.5);
  border-radius: 0;
}

/* ---------- Footer ---------- */

footer.footer {
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 54, 12, 0.14), transparent 70%), linear-gradient(to bottom, #0f1116, #050608) !important;
  box-shadow: inset 0 1px 0 0 rgba(232, 232, 228, 0.06);
}

footer.footer .footerTop {
  background-color: rgba(0, 0, 0, 0.25);
}

.cookieConcent .cookieBar {
  background: #a8240a;
  color: #ffffff;
  font-family: 'VT323', 'Courier New', monospace;
}