:root {
	/* Color */
	--wcdg--color--background: rgb(255, 255, 255);
	--wcdg--color--background-rgb: 255, 255, 255;
	--wcdg--color--primary: rgb(7, 66, 20);
	--wcdg--color--primary-rgb: 7, 66, 20;
	--wcdg--color--primary--contrast: rgb(20, 200, 60);
	--wcdg--color--secondary: rgb(255, 20, 75);
	--wcdg--color--secondary-rgb: 255, 20, 75;
	--wcdg--color--secondary--contrast: rgb(255, 255, 15);
	--wcdg--color--accent: rgb(110, 20, 240);
	--wcdg--color--accent-rgb: 110, 20, 240;
	--wcdg--color--accent--contrast: rgb(255, 255, 255);

	/* Spacing */
	--wcdg--spacing--gap: 1rem;

	/* Dimensions */
	--wcdg--dimensions--header: calc(var(--wcdg--spacing--gap) * 4);

	/* Viewport */
	--wcdg--viewport--height: calc(100vh - var(--wcdg--dimensions--header));
}

* {
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
	font-size: 16px;
	font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: var(--wcdg--spacing--gap);
}

ul {
	margin: var(--wcdg--spacing--gap);
	padding-left: calc(var(--wcdg--spacing--gap) * 2);
	list-style: decimal;
}

li {
	margin-top: calc(var(--wcdg--spacing--gap) * 0.5);
	margin-bottom: calc(var(--wcdg--spacing--gap) * 0.5);
}

em {
	font-style: italic;
	font-size: inherit;
}

fieldset {
	margin: var(--wcdg--spacing--gap);
	border: 1px solid #000;
	border-radius: var(--wcdg--spacing--gap);
	padding: var(--wcdg--spacing--gap);
}

legend {
	padding: calc(var(--wcdg--spacing--gap) * 0.5);
}

:where([class*="-component"]) {
	margin-bottom: calc(var(--wcdg--spacing--gap) * 0.5);
}

button,
.wcdg-form-button-component {
	border-radius: calc(var(--wcdg--spacing--gap) * 0.25);
	display: block;
	width: 100%;
	font-weight: 700;
	line-height: calc(var(--wcdg--spacing--gap) * 2);
	color: var(--wcdg--color--accent--contrast);
	background-color: var(--wcdg--color--accent);
	box-shadow: calc(var(--wcdg--spacing--gap) * 0.25) calc(var(--wcdg--spacing--gap) * 0.25) 0 0 rgba(var(--wcdg--color--accent-rgb), 0.3);
	transition: all 300ms;
}
button:where(.active),
.wcdg-form-button-component:where(.active) {
	color: var(--wcdg--color--primary);
	background-color: var(--wcdg--color--primary--contrast);
}
button:focus,
button:hover,
.wcdg-form-button-component:focus,
.wcdg-form-button-component:hover {
	cursor: pointer;
	color: var(--wcdg--color--secondary--contrast);
	background-color: var(--wcdg--color--secondary);
	box-shadow: calc(var(--wcdg--spacing--gap) * 0.25) calc(var(--wcdg--spacing--gap) * 0.25) 0 0 rgba(var(--wcdg--color--secondary-rgb), 0.3);
}
button:active,
.wcdg-form-button-component:active {
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
	transform: translateX(calc(var(--wcdg--spacing--gap) * 0.25)) translateY(calc(var(--wcdg--spacing--gap) * 0.25));
}

.wcdg-series-navigation-component {
	display: flex;
	flex-direction: row;
	gap: calc(var(--wcdg--spacing--gap) * 0.5);
	overflow-x: auto;
}
.wcdg-series-navigation-component :where(.wcdg-form-button-component) {
	display: block;
	flex-shrink: 0;
	width: calc(var(--wcdg--spacing--gap) * 4);
	height: auto;
	aspect-ratio: 1;
}

.wcdg-form-number-component,
.wcdg-form-text-component {
	border: 2px solid var(--wcdg--color--accent);
	border-radius: calc(var(--wcdg--spacing--gap) * 0.25);
	padding: calc(var(--wcdg--spacing--gap) * 0.25);
	display: block;
}

.wcdg-group-component {
	
}

.wcdg-form-number-incrementor-component {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content auto min-content;
	grid-template-areas:
		"up"
		"value"
		"down";
	gap: calc(var(--wcdg--spacing--gap) * 0.5);
}
.wcdg-form-number-incrementor-component__up,
.wcdg-form-number-incrementor-component__down {
	width: calc(var(--wcdg--spacing--gap) * 3);
	height: auto;
	aspect-ratio: 1;
}
.wcdg-form-number-incrementor-component__up {
	margin: 0;
	grid-area: up;
}
.wcdg-form-number-incrementor-component__value {
	margin: 0;
	display: flex;
	grid-area: value;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
}
.wcdg-form-number-incrementor-component__down {
	margin: 0;
	grid-area: down;
}

.wcdg-wildcard {
	padding: calc(var(--wcdg--spacing--gap) * 0.5);
}
.wcdg-wildcard__description {
	font-size: 0.8rem;
	font-style: italic;
}



.wcdg-site-title {
	margin: 0;
	height: var(--wcdg--dimensions--header);
	line-height: var(--wcdg--dimensions--header);
	font-size: 1.5rem;
	text-align: center;
}



.wcdg-setup {
	margin: 0;	
	padding-left: var(--wcdg--spacing--gap);
	padding-right: var(--wcdg--spacing--gap);
	display: flex;
	height: var(--wcdg--viewport--height);
	flex-direction: column;
}
.wcdg-setup__play {
	align-self: flex-end;
	justify-self: flex-end;
}



.wcdg-scorecard {
	margin: 0;
	padding: var(--wcdg--spacing--gap);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto min-content;
	grid-template-areas:
		"players"
		"navigation";
	height: var(--wcdg--viewport--height);
}
.wcdg-scorecard::after {
	content: "";
	display: block;
	grid-area: players;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(180deg, rgba(var(--wcdg--color--background-rgb), 0) 0%, rgba(var(--wcdg--color--background-rgb), 0) 80%, rgba(var(--wcdg--color--background-rgb), 1) 95%, rgba(var(--wcdg--color--background-rgb), 1) 100%);
	pointer-events: none;
}
.wcdg-scorecard__players {
	grid-area: players;
	overflow-y: auto;
}
.wcdg-scorecard__navigation {
	margin: 0;
	grid-area: navigation;
}



.wcdg-player {
	border: 2px solid var(--wcdg--color--accent);
	border-radius: calc(var(--wcdg--spacing--gap) * 0.25);
	display: grid;
	grid-template-columns: 1fr 1fr min-content;
	grid-template-rows: min-content;
	grid-template-areas: "info wildcard score";
	gap: 0;
}
.wcdg-player__info {
	padding: calc(var(--wcdg--spacing--gap) * 0.5);
	grid-area: info;
}
.wcdg-player__name {
	font-size: 1.5rem;
	word-break: break-all;
}
.wcdg-player__wildcard {
	grid-area: wildcard;
}
.wcdg-player__score {
	border-left: 2px solid var(--wcdg--color--accent);
	width: calc(var(--wcdg--spacing--gap) * 3);
	grid-area: score;
}
.wcdg-player__score :is(button, button:focus, button:hover) {
	border-radius: 0;
	box-shadow: none;
}