:root {
	--polka-bg-image: radial-gradient(rgb(0, 0, 0) 10%, transparent 12.4%),
		radial-gradient(rgb(20, 20, 20) 10%, transparent 12.4%),
		radial-gradient(rgb(17, 17, 17) 10%, transparent 12.4%),
		radial-gradient(rgb(14, 14, 14) 10%, transparent 12.4%);
	--polka-bg-position: 0px 0px, 36px 36px, -3.6px 3.6px, 32.4px 39.6px;
	--polka-bg-size: 13px 10px;
	--polka-bg-color: rgb(11, 11, 12);
}

.polka-dots {
	background-image: var(--polka-bg-image);
	background-position: 0px 0px, 36px 36px, -3.6px 3.6px, 32.4px 19.6px;
	background-size: var(--polka-bg-size);
}

#playfield {
	display: grid;
	gap: 1rem;
	padding: 1rem;
}

.score {
	text-align: center;
	padding: 1rem;
	border: solid 1px rgb(109, 109, 109);
	background-color: blue;
	width: minmax(10rem, 15rem);
	margin-inline: auto;
}

ul#answers {
	display: grid;
	/* TODO collaps into one column on smaller screen */
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 10px; /* optional spacing */
	list-style: none;
	padding: 0;

	& > li {
		border: solid rgb(107, 107, 107) 1px;
		background-color: rgb(46, 53, 59);
		padding: 0.2rem;
		text-align: center;
	}
}

/* .answer:has(input[type="checkbox"].points:checked) {
  outline: dashed yellow 2px;
} */

body[data-round-phase="ingame"]
	.answer:has(input[type="checkbox"].points:checked) {
	outline: dashed yellow 2px;
}

body[data-round-phase="end"]
	.answer:has(input[type="checkbox"].points:checked) {
	outline: double rgb(160, 189, 243) 4px;
}

#teams {
	gap: 1rem;
	& > div {
		padding: 1rem;
		background-color: rgb(28, 28, 28);
		align-self: center;

		& > h2 {
			margin-top: 0;
		}
	}
}

/* TODO does not support dynamic number of teams. also kinda a mess */
#teams[data-active-team-index="0"] {
	& > .team:nth-child(1) {
		border: solid yellow 1px;
		box-shadow: rgba(255, 255, 0, 0.397) 3px 3px 3px;
	}
	&.round-steal .team:nth-child(2) .steal-badge {
		opacity: 1;
	}
}
#teams[data-active-team-index="1"] {
	& > .team:nth-child(2) {
		border: solid yellow 1px;
		box-shadow: rgba(255, 255, 0, 0.397) 3px 3px 3px;
	}

	&.round-steal .team:nth-child(1) .steal-badge {
		opacity: 1;
	}
}

/* #teams[data-active-team-index="0"].round-steal .steal-badge{

} */

.team {
	position: relative;
}

.steal-badge {
	opacity: 0.1;
	/* TODO don't use absolute, make a 2 column layout */
	position: absolute;
	top: 0;
	right: 0;
	background-color: red;
	color: white;
	padding: 0.5rem;
	text-align: center;
}

.winner-badge {
	opacity: 0.1;
	/* TODO don't use absolute, make a 2 column layout */
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: rgb(98, 177, 130);
	color: white;
	padding: 0.5rem;
	text-align: center;
}

.team.winner .winner-badge {
	opacity: 1;
}

/* TODO maybe switch back to this? */
/* .round-steal .team:not(.active) .steal-badge {
	opacity: 1;
} */



menu#game-menu {
  padding: 0;
  display: flex;
  gap: 0.5rem;
}

#rest-game {
  background-color: crimson;
  color: white;
  margin-inline-start: auto;

  &:active {
    background-color: maroon;
  }
}

h2:has(#game-winner-name) {
	width: 100%;
  display: flex;
  gap: 1rem;
}
h2:has(#game-winner-name:empty) {
	display: none;
}

#round-type {
  padding-inline: 0.8rem;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
}

body[data-round-type="conclusion"] {
	border: double lightblue 6px;

  #round-type {
    border-color: red;
  }
}
body[data-round-type="feud"] {

  #round-type {
    border-color: lightblue;
  }
}
body[data-round-type="face-off"] {
	#strikes-and-steal,
	#round-score-wrap {
		cursor: not-allowed;
		opacity: 0.1;
		label,
		span {
			cursor: not-allowed;
		}
		input {
			pointer-events: none;
		}
	}
  #round-type {
    border-color: yellow;
  }
}

.strikes {
	text-align: center;
	font-size: 3rem;

	& > label > input {
		width: 2rem;
		height: 2rem;
	}
}

#next-round-options[open] {
	border: dashed yellow 1px;
}

button.buzzer {
	border-radius: 50%;
	width: 30rem;
	height: 30rem;
	box-shadow: grey 3px 1px 12px;
	transition-property: all;
	transition-duration: 100ms;
}

button.buzzer:active {
	box-shadow: grey 0px 0px 1px;
	border-bottom-color: grey;
	scale: 0.95;
}