::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #2d3748; }
        ::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #718096; }
        .login-bg {
            background-color: #111827;
            background-image: radial-gradient(#374151 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .chevron { transition: transform 0.2s ease-in-out; }
        .rotate-90 { transform: rotate(90deg); }
	    
	   .reggae-bg {
			background-color: #0a0f1a;
			background-image: 
				linear-gradient(
					to bottom, 
					rgba(139, 0, 0, 0.35) 0%,   
					rgba(139, 0, 0, 0.35) 33.3%,
					rgba(184, 134, 11, 0.35) 33.3%, 
					rgba(184, 134, 11, 0.35) 66.6%,
					rgba(0, 100, 0, 0.35) 66.6%, 
					rgba(0, 100, 0, 0.35) 100%
				),
				radial-gradient(#1f2937 1px, transparent 1px);
				background-size: 100% 100%, 20px 20px; 
				background-blend-mode: overlay;
				background-attachment: fixed;
			}
			
		.reggae-bg::before {
			content: "";
			position: fixed; 
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0; 
			pointer-events: none; 

			/* IMAGE SETTINGS */
			background-image: url('artists.png');
			background-position: bottom center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			opacity: 0.4; 
		}
												   
		.login-bg {
			background-color: #0a0f1a;
			overflow: hidden;   /* Ensures the image doesn't trigger scrollbars */

			background-image: 
				linear-gradient(
					to bottom, 
					rgba(139, 0, 0, 0.40) 0%,   
					rgba(139, 0, 0, 0.40) 33.3%,
					rgba(184, 134, 11, 0.40) 33.3%, 
					rgba(184, 134, 11, 0.40) 66.6%,
					rgba(0, 100, 0, 0.40) 66.6%, 
					rgba(0, 100, 0, 0.40) 100%
				),
				radial-gradient(#1f2937 1px, transparent 1px);

			background-size: auto auto !important;
			background-position: center, center;
			background-repeat: no-repeat, repeat;
			background-blend-mode: normal, normal;
			}

		.login-bg::before {
			content: "";
			position: absolute;
			inset: 0;         /* Fills the screen */
			z-index: 0;       /* Sits behind the login form */
			pointer-events: none; /* Allows clicks to pass through */

			/* THE IMAGE SETTINGS */
			background-image: url('artists.png'); /* Ensure this matches your PNG file */
			background-position: bottom center;
			background-repeat: no-repeat;
			background-size: auto auto;

			/* === CONTROL OPACITY HERE === */
			opacity: 0.4;  /* 0.0 is invisible, 1.0 is full strength */
			
			/* OPTIONAL: Blend it with the background colors behind it */
			mix-blend-mode: screen; /* Try 'overlay' or 'soft-light' for better blending */
		}

		/* Ensure your login form sits ON TOP of this image */
		.login-bg > div {
			position: relative;
			z-index: 10;
		}
			   
	     .chevron { transition: transform 0.2s ease-in-out; }
        
		.rotate-90 { transform: rotate(90deg); }
        
		@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

		.animate-pop { animation: fadeIn 0.15s ease-out forwards; }

		@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
		.animate-slide-up { animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards; }

		/* Double-tap seek animation */
		@keyframes seek-overlay {
			0%   { opacity: 0; }
			12%  { opacity: 1; }
			65%  { opacity: 1; }
			100% { opacity: 0; }
		}
		@keyframes seek-arrow-left-1 { 0% { opacity:0; transform:translateX(10px); } 20% { opacity:1; } 100% { opacity:0; transform:translateX(-14px); } }
		@keyframes seek-arrow-left-2 { 0% { opacity:0; transform:translateX(10px); } 35% { opacity:1; } 100% { opacity:0; transform:translateX(-14px); } }
		@keyframes seek-arrow-left-3 { 0% { opacity:0; transform:translateX(10px); } 50% { opacity:1; } 100% { opacity:0; transform:translateX(-14px); } }
		@keyframes seek-arrow-right-1 { 0% { opacity:0; transform:translateX(-10px); } 20% { opacity:1; } 100% { opacity:0; transform:translateX(14px); } }
		@keyframes seek-arrow-right-2 { 0% { opacity:0; transform:translateX(-10px); } 35% { opacity:1; } 100% { opacity:0; transform:translateX(14px); } }
		@keyframes seek-arrow-right-3 { 0% { opacity:0; transform:translateX(-10px); } 50% { opacity:1; } 100% { opacity:0; transform:translateX(14px); } }

		.seek-anim { pointer-events:none; position:absolute; top:0; bottom:0; width:50%; z-index:35; display:flex; align-items:center; justify-content:center; opacity:0; }
		.seek-anim-left  { left:0;  border-radius:0 100% 100% 0 / 0 50% 50% 0; }
		.seek-anim-right { right:0; border-radius:100% 0 0 100% / 50% 0 0 50%; }
		.seek-anim-bg { position:absolute; inset:0; background:rgba(255,255,255,0.12); border-radius:inherit; }

		.seek-anim.playing        { animation: seek-overlay 0.7s ease-out forwards; }
		.seek-anim.playing .seek-arrow-1 { animation: seek-arrow-left-1  0.55s ease-out 0.05s both; }
		.seek-anim.playing .seek-arrow-2 { animation: seek-arrow-left-2  0.55s ease-out 0.15s both; }
		.seek-anim.playing .seek-arrow-3 { animation: seek-arrow-left-3  0.55s ease-out 0.25s both; }
		.seek-anim-right.playing .seek-arrow-1 { animation: seek-arrow-right-1 0.55s ease-out 0.05s both; }
		.seek-anim-right.playing .seek-arrow-2 { animation: seek-arrow-right-2 0.55s ease-out 0.15s both; }
		.seek-anim-right.playing .seek-arrow-3 { animation: seek-arrow-right-3 0.55s ease-out 0.25s both; }

		.seek-anim-content { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; color:white; }
		.seek-anim-arrows  { display:flex; gap:2px; }
		.seek-anim-label   { font-size:12px; font-weight:600; letter-spacing:0.04em; opacity:0.9; }
		
		.title-element { 
			white-space: normal !important;
			overflow-wrap: break-word;
			word-break: break-word;
			min-width: 0;
			margin-right: 10px;
			}
			
		.title-item {
			overflow: visible;
			}
			
		.title-item h3 {
			overflow-wrap: break-word;
			word-break: break-word;
			hyphens: auto;
			white-space:normal;
			}
			
    /* The Comic Bubble Container */
    .comic-bubble {
        background-color: #1f2937; /* Matches bg-gray-800 */
        border: 1px solid #374151; /* Matches border-gray-700 */
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.6);
        
        /* Positioning */
        position: absolute;
        bottom: 100%; 
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 18px; /* Space for the arrow */
        z-index: 60;
        
        /* Layout - THIS WAS THE ISSUE */
        display: flex;
        flex-direction: column; /* Forces top-to-bottom layout */
        
        /* Size constraints */
        width: 18rem; /* Slightly wider (w-72) for better readability */
        max-width: 90vw;
        max-height: 400px; /* Prevent it from being too tall */
    }

    /* The "Tail" / Arrow */
    .comic-bubble::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -10px; 
        border-width: 10px;
        border-style: solid;
        /* The first color must match background-color (#1f2937) */
        border-color: #1f2937 transparent transparent transparent; 
    }

			
			
			
			/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; 
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  background-color: rgba(0,0,0,0.95); /* Black w/ slight transparency */
}

/* Modal Content (The Image) */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  border: 2px solid #333;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.modal-content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

/* Caption (File name) */
#imgCaption {
  margin-top: 10px;
  color: #ccc;
  font-family: sans-serif;
  font-size: 14px;
}

/* The Close Button */
.close-btn {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}

.close-btn:hover { color: #bbb; }

/* Next & Previous Buttons */
.prev-btn, .next-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
  z-index: 10000;
}

.next-btn { right: 0; }
.prev-btn { left: 0; }
.prev-btn:hover, .next-btn:hover { background-color: rgba(255,255,255,0.1); }
			
.cursor-move { cursor: move; }
[draggable="true"].dragging { opacity: 0.5; }
			
			
//* --------------------------  --------------------------*//
//*-------------------------- MEDIA Query-----------------*//
//* ----------------------------------------------------  *//
			
			@media (max-width: 768px) {
	
		#nfo-content {
			/* Scales font relative to screen width (1.6% of viewport width) */
			font-size: 1.6vw; 
			
			/* Matches line-height to font-size to prevent gaps in block art */
			line-height: 1.6vw; 
			
			/* Ensures the text stays inside the modal without horizontal scrolling */
			overflow-x: hidden; 
			white-space: pre; 
			display: block;
			padding: 10px; /* Optional: adds a little breathing room */
		}
	
		.list-item-container {
			padding: 8px;
		}
		.title-element {
			font-size: 11px !important; 
			line-height: 1.2;
			white-space: normal; 
			overflow-wrap: anywhere;
			max-width: 65%;
			flex: 1;
		}

		.path-text {
			font-size: 9px !important;
			word-break: break-all; 
		}

		.zip-button {
			flex-shrink: 0 !important;      
			white-space: nowrap; 
			margin-left: auto;
			font-size: 10px !important;
			padding: 6px 10px !important;
			min-width: 45px;
			}
			
		.title-item {
			flex: 1 !important;
			min-width: 0 !important;
			overflow: visible !important;
			}
			
		.title-item h3 {
			font-size: 11px !important;
			line-height: 1.3 !important;
			white-space: normal !important;
			overflow-wrap: break-word !important;
			word-break: break-word !important;
			hyphens: auto;
			max-width: 100% !important;
			}
			
			.login-bg {
			    background-color: #0a0f1a;
				overflow: hidden;
				background-image: linear-gradient(
				 to bottom, 
				 rgba(139, 0, 0, 0.40) 0%,   
				 rgba(139, 0, 0, 0.40) 33.3%,
				 rgba(184, 134, 11, 0.40) 33.3%, 
				 rgba(184, 134, 11, 0.40) 66.6%,
				 rgba(0, 100, 0, 0.40) 66.6%, 
				 rgba(0, 100, 0, 0.40) 100%
				),radial-gradient(#1f2937 1px, transparent 1px);
				background-size: auto auto !important;
				background-position: center, center;
				background-repeat: no-repeat, repeat;
				background-blend-mode: overlay, normal;
			}
			
			
		.login-bg::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 0;
			pointer-events: none; 

			/* THE IMAGE SETTINGS */
			background-image: url('artists.png'); 
			background-position: bottom center;
			background-repeat: no-repeat;
			background-size: auto 25%;
			opacity: 0.4;  
			mix-blend-mode: normal;
		}

		/* Ensure your login form sits ON TOP of this image */
		.login-bg > div {
			position: relative;
			z-index: 10;
		}
	}
		@media (max-width: 640px) {
    .comic-bubble {
        width: 14rem;   /* Smaller width for mobile */
        left: auto;     /* Unset the specific left alignment */
        right: 0;       /* Align to the right edge */
        transform: none; /* Remove centering transform */
        margin-right: -10px; 
    }
    
    /* Move the arrow to the right side to match the bubble */
    .comic-bubble::after {
        left: auto;
        right: 20px;    /* Position arrow near the right edge */
        margin-left: 0;
    }
	
	#nfo-content {
			/* Scales font relative to screen width (1.6% of viewport width) */
			font-size: 1.2vw;

			/* Matches line-height to font-size to prevent gaps in block art */
			line-height: 1.2vw;

			/* Ensures the text stays inside the modal without horizontal scrolling */
			overflow-x: hidden;
			white-space: pre;
			display: block;
			padding: 5px; /* Optional: adds a little breathing room */
		}
}

/* Playlist manager: master-detail on mobile (one panel at a time) */
@media (max-width: 767px) {
    #playlist-manager-modal[data-view="list"] #manager-content { display: none; }
    #playlist-manager-modal[data-view="detail"] #manager-sidebar { display: none; }
}