:root {
	--blueCop: #1e90ff;
	--jun: #74b9ff;
	--megaTrucker: #f3bf4b;
	--phoenixFire: #ff2400;
	--megaAmbler: #85be94;
	--shadowX: #cea0ce;
	--wildGuardy: #9fa2ee;
	--dexter: #ffee00;
	--fletaZ: #ec664b;
	--buffaloCrush: #ea619e;
	--busterGallon: #34b7bc;
	--blackHook: #76a8ee;
	--heavyIron: #d0586a;

	--redBlitz: #ff0062;
	--cielo: #006fff;
	--musclehyde: #00c5be;
	--gigantrex: #ff5a01;
	--mukara: #ec2f59;
}

.ua span {
	--bg-size: 1000%;
	background: linear-gradient(
			90deg,
			var(--blueCop),
			var(--megaTrucker),
			var(--megaAmbler),
			var(--phoenixFire),
			var(--shadowX),
			var(--dexter),
			var(--fletaZ),
			var(--wildGuardy),
			var(--buffaloCrush),
			var(--busterGallon),
			var(--blackHook),
			var(--blueCop)
		)
		0 0 / var(--bg-size) 100%;
	color: transparent !important;
	font-weight: 500 !important;
	background-clip: text;
	-webkit-background-clip: text;
	animation: animate 20s infinite linear;
}
@keyframes animate {
	to {
		background-position: var(--bg-size) 0;
	}
}

.bold {
	font-weight: bold !important;
}
.italic {
	font-style: italic;
}
.shake span {
	animation: shake calc(var(--random-length, 10000) * 0.2) infinite;
	animation-delay: calc(var(--offset) * -0.2) !important;
}
@keyframes shake {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-2%) translateY(2%);
	}
	50% {
		transform: translateX(0) translateY(-2%);
	}
	75% {
		transform: translateX(2%) translateY(2%);
	}
	100% {
		transform: translateX(0) translateY(-2%);
	}
}
.shakexl,
.shakexl span {
	animation: shakexl calc(var(--random-length, 1) * 0.1) infinite;
	font-size: 1.5em;
}
@keyframes shakexl {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-3%) translateY(3%);
	}
	50% {
		transform: translateX(0) translateY(-3%);
	}
	75% {
		transform: translateX(3%) translateY(3%);
	}
	100% {
		transform: translateX(0) translateY(-3%);
	}
}
.shakexxl,
.shakexxl span {
	animation: shakexxl calc(var(--random-length, 1) * 0.1) infinite;
	font-size: 2em;
}
@keyframes shakexxl {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5%) translateY(5%);
	}
	50% {
		transform: translateX(0) translateY(-5%);
	}
	75% {
		transform: translateX(5%) translateY(5%);
	}
	100% {
		transform: translateX(0) translateY(-5%);
	}
}
.shake.ua span {
	animation: shake calc(var(--random-length, 1) * 0.1) infinite, animate 20s infinite linear;
}
.shakexxl.ua span {
	animation: shakexxl calc(var(--random-length, 1) * 0.1) infinite, animate 20s infinite linear;
}
.xl span {
	font-size: 1.5em;
}
.xxl span {
	font-size: 2em;
}

.sarcasm span {
	font-style: italic;
	animation: sarcasm 0.5s infinite ease-in-out;
}

.voice span {
	animation-delay: calc(var(--offset) / 4) !important;
	color: var(--mukara) !important;
	animation: voice 1s ease-in-out infinite;
	font-style: italic;
}

.flipped {
	transform: rotate(180deg);
}
.subtitleArea:has(.flipped) {
	align-items: flex-start !important;
	top: min(50%, calc(17px + var(--bottomOffset, 0px))) !important;
	height: auto !important;
}
.subtitleArea.hover:has(.flipped) {
	top: min(50%, calc(70px + var(--bottomOffset, 0px))) !important;
}

@keyframes sarcasm {
	0% {
		transform: translateY(-4%);
	}
	50% {
		transform: translateY(4%);
	}
	100% {
		transform: translateY(-4%);
	}
}

@keyframes voice {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-2%);
	}
	50% {
		transform: translateY(0%);
	}
	75% {
		transform: translateY(2%);
	}
	100% {
		transform: translateY(0%);
	}
}

.trinity span {
	animation: trinityMorph 2s linear;
	animation-delay: var(--random-length) !important;
	animation-fill-mode: both;
}

@keyframes trinityMorph {
	0% {
		font-size: 1em;
		color: white;
		font-family: unset;
	}
	70% {
		font-size: 1em;
		color: white;
		font-family: unset;
	}
	71% {
		font-size: 1.1em;
		font-family: monospace;
		color: var(--redBlitz);
	}
	72% {
		font-size: 1em;
		color: white;
		font-family: unset;
	}
	90% {
		font-size: 1em;
		color: white;
		transform: rotate(0deg);
		font-family: unset;
	}
	91% {
		font-size: 1.2em;
		font-family: monospace;
		transform: rotate(180deg);
		color: var(--gigantrex);
	}
	92% {
		font-size: 1em;
		color: white;
		transform: rotate(0deg);
		font-family: unset;
	}
	98% {
		font-size: 1em;
		color: white;
		font-family: unset;
	}
	99% {
		font-weight: normal;
		color: var(--musclehyde);
		font-size: 1.3em;
	}
	100% {
		color: var(--blueCop);
		font-family: monospace;
		font-weight: bold;
		font-size: 1.2em;
	}
}

.glitch span {
	animation-delay: var(--random-length) !important;
	animation: glitch var(--random-length) linear infinite;
	color: var(--redBlitz) !important;
	animation-fill-mode: both;
	font-family: monospace;
}
.glitch span:after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	animation-delay: var(--random-length) !important;
	animation: glitch calc(var(--random-length) * 1.1) linear infinite;
	color: var(--phoenixFire) !important;
}

@keyframes glitch {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(5%, -5%);
	}
	20% {
		transform: translate(-5%, 5%);
	}
	29% {
		transform: translate(-5%, -5%);
	}
	30% {
		transform: translate(5%, -5%) rotate(180deg);
		content: '1';
	}
	39% {
		transform: translate(5%, -5%) rotate(180deg);
		content: '0';
		font-weight: bold;
	}
	40% {
		transform: translate(-5%, 5%);
	}
	50% {
		transform: translate(5%, -5%);
	}
	60% {
		transform: translate(-5%, 5%);
	}
	70% {
		transform: translate(5%, -5%);
	}
	80% {
		transform: translate(-5%, 5%);
	}
	90% {
		transform: translate(5%, -5%);
	}
	100% {
		transform: translate(0);
	}
}

.youHumans .word:last-child span {
	animation: shakexl 0.2s linear infinite;
	color: var(--phoenixFire) !important;
	font-weight: bold;
	font-size: 1.5em;
	animation-fill-mode: both;
	font-family: monospace;
}

.blueShine span {
	--bg-size: 2000%;
	background: linear-gradient(45deg, var(--blueCop) 20%, white, var(--blueCop) 80%) 0 0 /
		var(--bg-size) 100%;
	color: transparent !important;
	background-clip: text;
	-webkit-background-clip: text;
	animation: animate 40s infinite linear;
}
.changeFail {
	background-color: transparent !important;
}
.changeFail > * {
	transform: rotate(5deg);
	background-color: black;
	color: var(--redBlitz) !important;
	z-index: 1;
	font-size: 1.5em;
}
.changeFail span {
	background-color: transparent;
}

.changeFail:before {
	content: 'Metal Cardbot! Change Up!';
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	bottom: 0;
	padding: 0 0.25ch;
}
/* Todo: this is sort of a hacky solution for localizing FX */
/* Will need to find a better way to do this for future localizations */
/* Luckily, this is the only effect that uses pseudoelement text... */
.changeFail.lang-JP:before {
	content: 'メタルカードボット チェンジアップ';
}

/* Cardbots */
.blueCop {
	color: var(--blueCop) !important;
}
.jun {
	color: var(--jun) !important;
}
.megaTrucker {
	color: var(--megaTrucker) !important;
}
.phoenixFire {
	color: var(--phoenixFire) !important;
}
.megaAmbler {
	color: var(--megaAmbler) !important;
}
.shadowX {
	color: var(--shadowX) !important;
}
.wildGuardy {
	color: var(--wildGuardy) !important;
}
.dexter {
	color: var(--dexter) !important;
}
.fletaZ {
	color: var(--fletaZ) !important;
}
.buffaloCrush {
	color: var(--buffaloCrush) !important;
}
.busterGallon {
	color: var(--busterGallon) !important;
}
.blackHook {
	color: var(--blackHook) !important;
}
.heavyIron {
	color: var(--heavyIron) !important;
}
.mukara {
	color: var(--mukara) !important;
}
.redBlitz {
	color: var(--redBlitz) !important;
}
.cielo {
	color: var(--cielo) !important;
}
.musclehyde {
	color: var(--musclehyde) !important;
}
.gigantrex {
	color: var(--gigantrex) !important;
}

.both span {
	--bg-size: 600%;
	background: linear-gradient(90deg, var(--jun), var(--mukara), var(--jun)) 0 0 / var(--bg-size)
		100%;
	color: transparent !important;
	font-weight: 500 !important;
	background-clip: text;
	-webkit-background-clip: text;
	animation: animate 20s infinite linear;
}
.subtitleArea:has(.left) {
	align-items: flex-start !important;
	left: 15% !important;
	width: 85% !important;
}
.subtitleArea:has(.right) {
	align-items: flex-end !important;
	right: 15% !important;
	width: 85% !important;
}
.subtitleArea:has(.split) {
	align-items: center !important;
	left: 15% !important;
	right: 15% !important;
	width: 70% !important;
}
.split {
	width: 100%;
	background-color: transparent !important;
	justify-content: space-between !important;
}
.split > *:nth-child(1) {
	color: var(--redBlitz) !important;
}
.split > *:nth-child(2) {
	color: var(--blueCop) !important;
}
.split > * {
	background-color: rgba(0, 0, 0, 0.7) !important;
}
.punisher {
	position: relative;
	font-size: 4em !important;
	background-color: transparent !important;
}
.punisher span {
	--bg-size: 1000%;
	position: relative;
	font-style: italic;
	background: linear-gradient(
			90deg,
			var(--blueCop),
			var(--megaTrucker),
			var(--megaAmbler),
			var(--phoenixFire),
			var(--shadowX),
			var(--dexter),
			var(--fletaZ),
			var(--wildGuardy),
			var(--buffaloCrush),
			var(--busterGallon),
			var(--blackHook),
			var(--blueCop)
		)
		0 0 / var(--bg-size) 100%;
	color: transparent !important;
	font-weight: 900 !important;
	padding-right: 0.1em;
	background-clip: text;
	-webkit-background-clip: text;
	animation: animate 20s infinite linear;
	transform: translate(-0.25em, -0.25em);
	z-index: 1;
}
.punisher:before {
	content: '';
	position: absolute;
	top: 0;
	left: -15%;
	width: 130%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	clip-path: polygon(100% 0, 84% 100%, 0 100%, 18% 0);
}
.punisher:after {
	content: '갤럭시즈 퍼니셔';
	color: #777 !important;
	position: absolute;
	top: 0.5em;
	font-size: 0.75em;
	font-weight: bold;
	font-style: italic;
	left: calc(-50% + 20px);
	width: 200%;
	text-align: center;
	height: 100%;
}
@media screen and (max-width: 900px) {
	.punisher {
		font-size: 6vw !important;
	}
}

/* screenspace effects */
.bonkRight {
	animation: bonkRight 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes bonkRight {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(5%, -2%);
	}
	100% {
		transform: translate(0);
	}
}
.bonkUp {
	animation: bonkUp 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes bonkUp {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(-5%);
	}
	100% {
		transform: translateY(0);
	}
}
.bonkLeft {
	animation: bonkLeft 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes bonkLeft {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(-5%, -2%);
	}
	100% {
		transform: translate(0);
	}
}
.bonkDown {
	animation: bonkDown 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes bonkDown {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(5%);
	}
	100% {
		transform: translateY(0);
	}
}
.impactSmall {
	animation: impactSmall 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes impactSmall {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(3%, 2%);
	}
	20% {
		transform: translate(-2%, 1%);
	}
	30% {
		transform: translate(-1%, 1%);
	}
	50% {
		transform: translate(0.5%, -0.5%);
	}
	70% {
		transform: translate(0.25%, -0.25%);
	}
	90% {
		transform: translate(-0.1%, -0.1%);
	}
	100% {
		transform: translate(0);
	}
}
.impact {
	animation: impact 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes impact {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(10%, 9%);
	}
	20% {
		transform: translate(-8%, 7%);
	}
	30% {
		transform: translate(-6%, 5%);
	}
	50% {
		transform: translate(4%, -3%);
	}
	70% {
		transform: translate(2%, -1%);
	}
	90% {
		transform: translate(-1%, -1%);
	}
	100% {
		transform: translate(0);
	}
}
.screenshake {
	animation: screenshake 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
@keyframes screenshake {
	0% {
		transform: translate(0);
	}
	25% {
		transform: translate(1%, 0.5%);
	}
	50% {
		transform: translate(-1%, -0.5%);
	}
	75% {
		transform: translate(0.5%, -0.5%);
	}
	100% {
		transform: translate(0);
	}
}
main:has(.flashbang) {
	animation: flashbang 0.5s ease-in-out;
	animation-fill-mode: forwards;
}
main:has(.flashbang) .playlist,
main:has(.flashbang) .btnrowScrollWrapper {
	animation: playlistFlashbang 0.5s ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes flashbang {
	0% {
		background-color: transparent;
	}
	50% {
		background-color: white;
	}
	75% {
		background-color: rgba(255, 128, 0, 0.5);
	}
	100% {
		background-color: transparent;
	}
}
@keyframes playlistFlashbang {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
main:has(.slice) {
	animation: sliceFlashbang 0.4s ease-in-out;
	animation-fill-mode: forwards;
}
main:has(.slice) .playlist,
main:has(.slice) .btnrowScrollWrapper {
	animation: slicePlaylistFlashbang 0.5s ease-in-out;
	animation-fill-mode: forwards;
}
main:has(.sliceAfter),
main:has(.fnDie) {
	overflow: hidden;
}
main:has(.sliceAfter) .playlist,
main:has(.fnDie) .playlist {
	transform: rotate(3deg) translateY(3vh);
	clip-path: polygon(0% 45%, 100% 52%, 0% 55%, 0% 100%, 100% 100%, 100% 0, 0% 0);
	animation: slash 0.4s linear;
}
@keyframes slash {
	0% {
		transform: rotate(3deg) translateY(3vh) translateX(0vw);
	}
	10% {
		transform: rotate(3deg) translateY(3vh) translateX(5vw);
	}
	20% {
		transform: rotate(3deg) translateY(3vh) translateX(-0.5vw);
	}
	30% {
		transform: rotate(3deg) translateY(3vh) translateX(0.75vw);
	}
	40% {
		transform: rotate(3deg) translateY(3vh) translateX(-0.25vw);
	}
	50% {
		transform: rotate(3deg) translateY(3vh) translateX(0.35vw);
	}
	60% {
		transform: rotate(3deg) translateY(3vh) translateX(-0.15vw);
	}
	70% {
		transform: rotate(3deg) translateY(3vh) translateX(0.15vw);
	}
	80% {
		transform: rotate(3deg) translateY(3vh) translateX(-0.05vw);
	}
	90% {
		transform: rotate(3deg) translateY(3vh) translateX(0.1vw);
	}
}
main:has(.sliceAfter) .playlist:after,
main:has(.fnDie) .playlist:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		transparent 35%,
		rgba(81, 168, 255, 0.75) 40%,
		white 53%,
		rgba(81, 168, 255, 0.75) 60%,
		transparent 65%,
		transparent
	);
	clip-path: polygon(100% 50%, 100% 55%, 0% 70%, 0% 30%);
	filter: blur(10px);
}
@keyframes sliceFlashbang {
	0% {
		background-color: transparent;
	}
	25% {
		background-color: rgba(0, 128, 255, 0.5);
	}
	100% {
		background-color: white;
	}
}
@keyframes slicePlaylistFlashbang {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
main:has(.fnDie) {
	animation: blackout 3s ease-out;
	animation-fill-mode: forwards;
}
main:has(.fnDie) .playlist,
main:has(.fnDie) .btnrowScrollWrapper {
	animation: playlistBlackout 3s ease-out;
	animation-fill-mode: forwards;
}
@keyframes blackout {
	0% {
		background-color: transparent;
	}
	75% {
		background-color: rgba(0, 0, 0, 0.5);
	}
	100% {
		background-color: black;
	}
}
@keyframes playlistBlackout {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

/* =========================================
   FX OVERRIDE & SVELTE DOM REPLICATION
   ========================================= */

/* 1. Turn off default #yt-sub-box styling when FX are present to avoid double-layering */
#yt-sub-box.fx-override {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 2. Emulate the exact layout of Svelte's <CaptionEffect> component */
.subtitle-fx-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
}

.subtitle-fx-container .word {
    display: inline-block;
    padding: 0 0.25ch;
    white-space: pre-wrap; 
}

.subtitle-fx-container span {
    display: inline-block;
    white-space: pre-wrap;
    font-family: 'Poppins', sans-serif !important; /* Force Poppins font! */
}

/* 3. FIXING THE TIGHT PILL: Restoring your style.css padding! */

/* When 'useBackground' is TRUE (e.g. Supernova Shield), the background covers the whole sentence. */
.subtitle-fx-container.useBackground {
    background: rgba(0, 0, 0, 0.65) !important; 
    border-radius: 6px !important; 
    padding: 4px 10px !important; /* Proper style.css padding */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* When 'useBackground' is FALSE (e.g. REX! INFERNO!!), the background covers INDIVIDUAL WORDS. */
.subtitle-fx-container:not(.useBackground) .word {
    background: rgba(0, 0, 0, 0.65) !important; 
    border-radius: 6px !important; 
    padding: 4px 10px !important; /* Adds top/bottom padding to fix the tight pill! */
    margin: 2px 4px !important; /* Creates a clean gap between the separated word blocks */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* =========================================
   GRADIENT & CUSTOM BACKGROUND FIXES
   ========================================= */

/* 1. Prevent the black text-shadow from bleeding through transparent gradient text! */
.ua span,
.blueShine span,
.both span,
.punisher span {
    text-shadow: none !important;
}

/* 2. Certain effects have custom backgrounds built into them (like Punisher's slanted box). 
      This stops our black pill box from squishing them. */
.subtitle-fx-container.punisher,
.subtitle-fx-container.changeFail,
.subtitle-fx-container.split {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}