.inplaytracker-content {
	display: contents;
	
	.inplaytracker {
		grid-column: mainLeft / mainRight;
		display: flex;
        flex-direction: column;
        gap: 0.25rem;
		overflow: auto;
		
		.profile-fact-title {
			position: relative;
			font-size: 1rem;
			font-weight: 500;
			text-transform: uppercase;
			color: var(--color-character-fact-title);
			
			&:after {
				content:"";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0rem;
				height: 0.1rem;
				background-color: var(--color-character-fact-title);
			}
		}
		
		.scene-wrapper {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
  			overflow: auto;
  			scrollbar-width: thin;
		}
	}
}

.scene {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	background-color: var(--color-inplaytracker-scene);
	border-radius: 0.25rem;
	cursor: pointer;
	
	&:hover {
		background-color: var(--color-inplaytracker-scene--hover);
	}
	
	.details {
		display: flex;
		gap: 1.5rem;
	}

	.detail,
	.characters {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
}

.players {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;

	.player {
		display: inline-flex;
		gap: 0.5rem;

		&:after {
			content: "•";
		}

		&:last-child:after {
			display: none;
		}
	}
}

.inplaytracker-overview {
	display: grid;
	grid-template-columns: max-content auto 12rem;
	grid-template-areas: "info scene lastpost";
	gap: 1rem;
	
	.row {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: info / lastpost;
		align-items: center;
		
		&.character {
			grid-template-columns: auto;
			grid-column: info / lastpost;
			justify-items: center;
			font-family: var(--font-secondary);
            font-size: 2.5rem;
            letter-spacing: 0.3em;
            line-height: 0.5;
            text-shadow: 0.5px 0.5px 0px currentColor;
            text-transform: lowercase;
			margin-top: 2.5rem;
		}
		
		&.head {
			grid-template-columns: auto;
			grid-column: info / lastpost;
			position: relative;
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--color-character-fact-title);
			
			&:after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0rem;
                height: 0.1rem;
                background-color: var(--color-character-fact-title);
            }
		}
		
		&.scene-wrapper {
			background-color: var(--color-inplaytracker-scene);
		
			&:hover {
				background-color: var(--color-inplaytracker-scene--hover);
			}
		}
		
		.info {
			grid-column: info;
			text-align: center;
			color: var(--color-text-accent);
			
			i {
				font-weight: 500;
			}
		}
		
		.scene {
			grid-column: scene;
			display: flex;
			flex-direction: column;
			background-color: transparent;
			
			.title {
				font-size: 0.875rem;
			}
		}
		
		.lastpost {
			grid-column: lastpost;
		}
	}
}