Wuffles' EMQ Style Script v1.4 by Wuffles

/* ==UserStyle==
@name         Wuffles' EMQ Style Script
@version      1.4
@namespace    userstyles.world/user/Wuffles
@description  A customizable theme for erogemusicquiz.com for dark theme
@author       Wuffles
@license      MIT License
==/UserStyle==*/
/*=============================================================================================

Changelog:
  1.4 
	- added styling for Profile page (also fixed vndb imported images stretching)
    - added styling for Erodle page
    - added contrast/shadow to rig information so its visible on white backgrounds
    - added styling for volume bar and default green/red text for correct/incorrect answers
  1.3
	- removed custom vndb avatar stretch for preview
	- fixed styling for review queue page
	- added lobby ready/not ready state coloring
  1.2.5
	- fixed answered color state for other players
	- redid chat box styling and opacity
  1.2
	- added styling for spaced repetition card
	- added styling for my song stats card
	- removed custom vndb avatar stretch > changed to cover / positioned to top
	- added no-answer/correct/wrong/guessed coloring state for VNDB avatars
  1.1
	- reorganized and cleaned up :root
	- changed video to only be translucent during guess phase
	- removed scroll bar when lobby of 8+ players (NEEDS TESTING)
	- added optional image overlay for video
  1.0
    - updated to the new domain
    - fixed looting game mode to work with distance marker
	- added styling for settings and preference menu

=============================================================================================*/

@-moz-document domain("erogemusicquiz.com") {
	:root {
		/* ====================================== feel free to edit these ====================================== */
		
		/* Background Image and Side Bar */
		--mainBackground: url(https://i.imgur.com/Wvnejk6.jpeg);
		--backgroundColorOverlay: rgba(0, 0, 0, .25); /* background color/dim overlay for bright backgrounds, set alpha to 0 if not needed */ 
		--sideBar: linear-gradient(180deg, rgba(49, 40, 255, .8) 0%, rgba(134, 19, 255, .8) 50%, rgba(0,0,0,0.2) 85%, rgb(2, 0, 91) 100%);
		
		/* Optional Image Overlaying the Video Player, Gifs might work idr */
		/* uncomment the line below for an example, you can put emotes or anything really */
		/*--videoImage: url(https://i.imgur.com/jOaXs4O.png);*/
		--videoImageSize: 15%;
		--videoImagePos: bottom 7px left 7px;
		
		/* Main Colors */
		--accentColor: #f086ff; 
		--secondaryAccentColor: #c33eff;
		--tertiaryAccentColor: #5dbaff;
		
		/* Main Text */
		--mainTextColor: #fff;
		--secondaryTextColor: #000;
		--textShadowColor: #82ebff;
        --correctAnswerTextColor: #0f0;; 
        --wrongAnswerTextColor: #f00;
        --textContrast: #f086ff;
		
		/* Main Box & Backgrounds */
		--boxGlowColor: #f086ff; 
		--boxBackgroundColor: #000;
		--boxBackgroundColorTranslucent: #000c;
		--borderRadius: 10px;
		
		/* Button Borders & Hover */
		--borderColor: #fff;
		--hoverColor: #fff;
		--hoverTextColor: #000;
		
		/* Lobby Ready State */
		--readyColor: #0f0;
		--notReadyColor: #f00;
        
		/* Avatar Answer Glow */
		--noAnswerColor: #00c8ff00;
		--waitingAnswerColor: #ff0;
		--correctAnswerColor: #0f0;
		--wrongAnswerColor: #f00;
        
		/* Avatar Replacement: basically same as AMQ but 'thinking' and 'no answer' states are merged */
		/* preferably in .webp or .png  and with a 1:1 ratio and at least 160x160 resolution */
		--baseAvatar: url('https://files.catbox.moe/pdf0jk.webp'); /*in lobby and looting character icon*/
		--thinkingAvatar: url('https://files.catbox.moe/00uv7a.webp'); /*no answer in guess phase*/
		--waitingAvatar: url('https://files.catbox.moe/kwv6ag.webp'); /*answered in guess phase*/
		--correctAvatar: url('https://files.catbox.moe/lyh620.webp'); /*correct answer in results phase*/
		--wrongAvatar: url('https://files.catbox.moe/gdi570.webp'); /*wrong answer in results phase*/
		
		--vndbAvatarPosition: 0px 0px; /* change the second number: decrease value to move down */
	}
	
	/* =================== if you do not know what you're doing, no need to edit beyond this point ==================*/
	
	/* Main Background */
	body {
		background:
			linear-gradient(
          var(--backgroundColorOverlay), 
          var(--backgroundColorOverlay)
			),  
			var(--mainBackground);
		/*  you may want to mess with size/positioning to get your desired effect */
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	
	.sidebar[b-0e082mtxss] {
		background-image: var(--sideBar);
	}
	
	/* Home Section */
	h1 {
		color: var(--mainTextColor);
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor);
	}
	
    /* Profile Page Section */
    article.px-4 > img {
        object-fit: cover;
		object-position: var(--vndbAvatarPosition);
        border-radius: var(--borderRadius);
    }
    
    span[b-hvcinh912u], ul[b-hvcinh912u]:not(ul ul), h4[b-hvcinh912u], div[b-hvcinh912u] > div.paginator, div[b-hvcinh912u] > table.quickgrid[b-vznuo5fmpv] {
        background-color: var(--boxBackgroundColorTranslucent);
        border-radius: var(--borderRadius);
    }
    
	/* Hotel Section */
	.roomCard {
		background-color: var(--boxBackgroundColor);
    	color: var(--mainTextColor);
		opacity:  85%;
    	border-radius: var(--borderRadius);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor),  0 0 10px var(--boxGlowColor), 0 0 10px var(--boxGlowColor);
	}
	
	/* Lobby Section */
	div#roomInfo {
		background-color: var(--boxBackgroundColor);
		border-radius: var(--borderRadius);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor),  0 0 10px var(--boxGlowColor), 0 0 10px var(--boxGlowColor);
		padding: 0px 5px 0px 5px;
		opacity:  85%;
	}
	
	/* Lobby Buttons Section */
	.btn-primary {
		color: var(--mainTextColor);
    	background-color: var(--accentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
	}
	
	.btn-secondary {
		color: var(--mainTextColor);
    	background-color: var(--tertiaryAccentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
	}
	
	.btn-warning {
		color: var(--mainTextColor);
    	background-color: var(--secondaryAccentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
	}
    
    .btn-success {
        color: var(--mainTextColor);
    	background-color: var(--accentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
    }
    
    .btn-danger {
        color: var(--mainTextColor);
    	background-color: var(--secondaryAccentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
    }
    
    input#QPVolumeMaster::-webkit-slider-thumb, input#QPVolumeMaster::-moz-range-thumb {
        background-color: var(--accentColor);
    }
    
    input#QPVolumeMaster::-webkit-slider-runnable-track, input#QPVolumeMaster::-moz-range-track {
        background-color: var(--boxBackgroundColorTranslucent);
    }
	
	/* Settings and Preferences Menu */
	a.nav-link {
		background-color: var(--boxBackgroundColorTranslucent);
	}
	
	a.nav-link.active {
		--bs-nav-tabs-link-active-color: var(--mainTextColor);
		--bs-nav-tabs-link-active-bg: var(--boxBackgroundColor);
		--bs-nav-tabs-link-active-border-color: var(--borderColor);
		opacity: 100%;
	}
	
	.form-check-input:checked {
		background-color: var(--accentColor);
		border-color: var(--borderColor);
	}
	
	tr.tag > th > [type=button] {
		outline : 1px solid red;
		border-radius: 5px;
	}
	
	.valid {
		outline: 1px solid var(--accentColor);
		border-radius: 5px;
	}
	
	.valid.modified:not([type=checkbox]) {
		outline: 1px solid var(--tertiaryAccentColor);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor);
		border-radius: 5px;
	}
	
	/* Looting Gamemode Section  */
	#treasureRoomMainDiv {
		background-color: var(--boxBackgroundColorTranslucent) !important;
		opacity:  95%;
    	border-radius: var(--borderRadius);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor),  0 0 10px var(--boxGlowColor), 0 0 10px var(--boxGlowColor);
	}
	
	#countdownDiv {
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor);
		color: var(--mainTextColor);
	}
	
	#treasureRoomInventoryDiv {
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor);
		color: var(--mainTextColor);
		padding: 0px 5px 0px 5px;
	}
	
	#treasureRoomCoordsDiv {
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0...