#app {
	display: flex;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.7);
}

#loading {
	height: 100vh;
	font-size: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center;
	animation-timing-function: linear;
}

#loading > div {
    animation: grow 2s infinite;
	transform-origin: inherit;
	animation-timing-function: linear;
}

#loading > div > div {
    animation: wobble 1.3s infinite;
	transform-origin: inherit;
	animation-timing-function: linear;
}


#main {
	min-height: 100vh;
	width: 600px;
}

.card-stack > div {
	background-color: var(--velvety-red-dark);
}

.game-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;

	background-color: var(--mahogany);
	color: #FFFFFF;
}

	.game-card > div {
		padding: 1vmax;
	}

	.player-name {
		flex: 0 1 auto;

		font-size: 3rem;
		font-weight: 600;
		line-height: 3rem;
		min-height: 3rem;
	}

	.topic-name {
		flex: 0 1 auto;

		font-size: 1.5rem;
		font-weight: 600;
		line-height: 3rem;
		min-height: 3rem;
	}

	.wheel {
		flex: 1 1 auto;

		width: 100%;
		max-width: 800px;

		display: flex;
		align-items: center;
		justify-content: center;

		container-type: size;
		container-name: wheel;
	}

	spinning-wheel {
		aspect-ratio: 1 / 1;
		height: 100%;
		width: auto;
		max-width: 800px;
	}

	@container wheel (aspect-ratio < 1) {
		.wheel {
			background-color: purple;
		}

		spinning-wheel {
			aspect-ratio: 1 / 1;
			width: 100%;
			height: auto;
		}
	}

.action-card {
	display: flex;
	flex-direction: column;
	gap: 4px;

	background-color: var(--mahogany);
	color: #FFFFFF;
}

	.action-title {
		flex: 0 1 auto;

		width: 100%;

		min-height: 1.25em;

		line-height: 1.25em;
		font-size: 1.25em;
		font-weight: 600;
	}

	.action-description {
		flex: 1 1 auto;

		overflow-y: auto;
		scrollbar-gutter: stable;
		scrollbar-width: thin;

		line-height: 1.5;

		padding: 0 16px;
	}

	.action-buttons {
		flex: 0 1 auto;
	}


@keyframes grow {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wobble {
  0% {
	transform: rotate(0deg);
  }
  25% {
	transform: rotate(2deg);
  }
  75% {
	transform: rotate(-2deg);
  }
  100% {
	transform: rotate(0deg);
  }
}