.drop-1 { box-shadow: var(--drop-level-1); }
.drop-2 { box-shadow: var(--drop-level-2); }

.pad-s { padding: var(--spacing-small); }
.pad-m { padding: var(--spacing-medium); }
.pad-l { padding: var(--spacing-large); }

.round-l { border-radius: var(--loose-corner); }
.round-t { border-radius: var(--tight-corner); }

.bg-100 { background-color: var(--gray-100); }
.bg-200 { background-color: var(--gray-200); }
.bg-300 { background-color: var(--gray-300); }
.bg-700 { background-color: var(--gray-700); }
.bg-800 { background-color: var(--gray-800); }
.bg-900 { background-color: var(--gray-900); }

.fg-100 { color: var(--gray-100); }
.fg-900 { color: var(--gray-900); }

.outcome.win { color: var(--disk-a-alt); }
.outcome.lose { color: var(--disk-b-alt); }
.outcome.draw { color: var(--gray-600); }

.posabs { position: absolute; }
.posrel { position: relative; }
.posfix { position: fixed; }

.t0 { top: 0; }
.b0 { bottom: 0; }
.r0 { right: 0; }
.l0 { left: 0; }

.h0 { left: 0; right: 0; }
.v0 { top: 0; bottom: 0; }

.a0 { top: 0; bottom: 0; left: 0; right: 0; }

.dispnone { display: none; }
.dispinbl { display: inline-block; }
.dispbl { display: block; }

.valigntop { vertical-align: top; }
.valignsup { vertical-align: super; }

.center { text-align: center; }

.floatr { float: right; }

.w100m2m { width: calc(100% - var(--spacing-medium)); }

.fullwidth {
	width: 100%;
	box-sizing: border-box;
}

.subtile {
	color: var(--gray-600);
	font-style: italic;
}

.nosel {
	user-select: none;
	font-weight: 600;
}

.sidebyside {
	display: grid;
	grid-gap: var(--spacing-medium);
	grid-auto-flow: column;
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.abscenter {
	top: 51%;
	left: 50%;
	transform: translate(-50%, -50%);
}