Template:Tournament row/styles.css

.loka-tournament-list {
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 5px;
	overflow: hidden;
	background: rgba(18, 18, 18, .45);
}

.loka-tournament-list-header,
.loka-tournament-list-row {
	display: grid;
	grid-template-columns: minmax(215px, 1.55fr) minmax(78px, .55fr) repeat(3, minmax(130px, 1fr));
	column-gap: .75em;
	align-items: center;
}

.loka-tournament-list-header {
	padding: .48em .7em;
	color: #f0cf8e;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .045);
}

.loka-tournament-list-row {
	position: relative;
	isolation: isolate;
	min-height: 54px;
	padding: .48em .7em;
	font-size: .84em;
	border-top: 1px solid rgba(255, 255, 255, .075);
	overflow: hidden;
}

.loka-tournament-list-row:hover {
	background: rgba(255, 255, 255, .035);
}

.loka-tournament-list-name,
.loka-tournament-list-format,
.loka-tournament-list-placement {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.loka-tournament-list-primary {
	display: inline;
	margin-left: .3em;
}

.loka-tournament-list-primary {
	font-family: UNIVERSAL-SERIF, serif;
	font-size: 1.08em;
	font-variant: small-caps;
	font-weight: 600;
}

.loka-tournament-list-date {
	display: block;
	margin-top: .12em;
	font-size: .76em;
	opacity: .68;
}

.loka-tournament-list-backdrop + .loka-tournament-list-name .loka-tournament-list-primary a {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .75);
}

.loka-tournament-list-backdrop {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 0;
	width: 68%;
	overflow: hidden;
	opacity: .65;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 18%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0%, #000 18%, transparent 100%);
}

.loka-tournament-list-backdrop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: brightness(.84) saturate(.92);
}

.loka-tournament-list-row img {
	image-rendering: pixelated;
}

.loka-tournament-list-backdrop img {
	image-rendering: auto;
}

.loka-tournament-list-placement {
	display: flex;
	align-items: center;
	gap: .35em;
}

.loka-tournament-list-placement-text,
.loka-tournament-list-placement-name,
.loka-tournament-list-placement-members {
	display: block;
}

.loka-tournament-list-placement-members {
	margin-top: .08em;
	font-size: .78em;
	opacity: .66;
}

.loka-tournament-list-winner {
	flex-wrap: wrap;
}

.loka-tournament-list-championship {
	display: block;
	flex: 0 0 100%;
	margin-top: .28em;
	padding-top: .25em;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .76em;
	line-height: 1.3;
}

.loka-tournament-list-champion-current,
.loka-tournament-list-champion-history {
	display: block;
}

.loka-tournament-list-champion-history {
	opacity: .68;
}

.loka-tournament-list-champion-label {
	color: #f0cf8e;
	font-size: .88em;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.loka-tournament-list-mobile-label {
	display: none;
}

.loka-tournament-filter-target {
	display: none;
}

.loka-tournament-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin: 0 0 .65em;
}

.loka-tournament-filters a {
	display: inline-block;
	padding: .3em .72em;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 4px;
	background: rgba(255, 255, 255, .04);
	color: inherit;
	font-size: .78em;
	text-decoration: none;
}

.loka-tournament-filters a:hover,
#tournaments-all:target ~ .loka-tournament-filters a[href$="#tournaments-all"],
#tournaments-1v1:target ~ .loka-tournament-filters a[href$="#tournaments-1v1"],
#tournaments-2v2:target ~ .loka-tournament-filters a[href$="#tournaments-2v2"],
#tournaments-3v3:target ~ .loka-tournament-filters a[href$="#tournaments-3v3"] {
	background: rgba(240, 207, 142, .14);
	border-color: rgba(240, 207, 142, .42);
}

#tournaments-1v1:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--1v1),
#tournaments-2v2:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--2v2),
#tournaments-3v3:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--3v3) {
	display: none;
}

@media (max-width: 760px) {
	.loka-tournament-list-header {
		display: none;
	}

	.loka-tournament-list-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name format"
			"winner winner"
			"second second"
			"third third";
		row-gap: .3em;
		padding: .62em .7em;
	}

	.loka-tournament-list-name { grid-area: name; }
	.loka-tournament-list-format { grid-area: format; text-align: right; }
	.loka-tournament-list-winner { grid-area: winner; }
	.loka-tournament-list-second { grid-area: second; }
	.loka-tournament-list-third { grid-area: third; }

	.loka-tournament-list-placement {
		font-size: .9em;
	}

	.loka-tournament-list-mobile-label {
		display: inline-block;
		flex: 0 0 4.8em;
		font-size: .72em;
		font-weight: 700;
		letter-spacing: .03em;
		text-transform: uppercase;
		opacity: .58;
	}

	.loka-tournament-list-backdrop {
		width: 86%;
		opacity: .5;
	}
}

@media (prefers-color-scheme: light) {
	.loka-tournament-list {
		background: rgba(255, 255, 255, .58);
		border-color: rgba(0, 0, 0, .1);
	}

	.loka-tournament-list-header {
		color: #8b5d22;
		background: rgba(0, 0, 0, .035);
	}

	.loka-tournament-list-row {
		border-top-color: rgba(0, 0, 0, .08);
	}

	.loka-tournament-list-row:hover {
		background: rgba(0, 0, 0, .025);
	}

	.loka-tournament-filters a {
		background: rgba(0, 0, 0, .025);
		border-color: rgba(0, 0, 0, .12);
	}

	.loka-tournament-list-championship {
		border-top-color: rgba(0, 0, 0, .1);
	}

	.loka-tournament-list-champion-label {
		color: #8b5d22;
	}

	.loka-tournament-list-backdrop {
		opacity: .42;
	}

	.loka-tournament-list-backdrop img {
		filter: brightness(1) saturate(.82);
	}
}