@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	background-color:#450AAE;
	font-size: 18px;
	height: 100%;
}
body {
	background: linear-gradient(180deg,#450AAE,darkviolet,#450AAE);
	font-family: "Public Sans", sans-serif;
	margin: 0;
	padding-top: var(--safe-top);
	padding-bottom: var(--safe-bottom);
	height: 100%;
}
h1, h2{
	line-height:1em;
    color: #83DEC0; 
    background-image: linear-gradient(45deg, #83DEC0 , #B5DEAB , #83DEC0 , #D5E0B1 ); 	background-clip: text; 
	 -webkit-background-clip: text; 
	 -webkit-text-fill-color: transparent; 
	 margin-bottom:.7em;
}
p {
	color:#FFFFFF;
	line-height:1em;
	margin-bottom:.5em;
}
.container {
	width: 100vw;
	min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
	overflow-y: hidden;
	display: flex;
	flex-wrap:nowrap;
	flex-direction:row;
	white-space: nowrap;
	max-width:768px;
	margin:auto auto;
}
.game_scene {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100vw;
	max-width:768px;
	flex:0 0 100vw;
	scroll-snap-align: start;
	white-space:normal;
	padding:1em;
}
.image {
	&.venue {
		height: 130px;
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	img {
		width: 100%;
	}
}
.pdq {
	flex: 1 1 0;
	padding-top: 3em;
	display: flex;
	align-items: center;
}
.answers {
	text-align: center;
	line-height: 1.2em;
}
.pdg {
	max-width: 30%;
	padding: 2em 0;
}
.button {
	font-size:1.5em;
	background-color:#32176e;
	color:#FFF;
	font-weight:800;
	width:100%;
	text-align:center;
	padding:1em 0;
	border-radius:10em;
	transition-property: background-color, color;
	transition-duration:  .3s;
	&:hover{
		background-color:#e339b6;
		color:#FFF;
	}
}
.copy {
	max-width:100%;
}
.game_scene:not(#idle, #game_over) {
	justify-content:flex-start;
	align-items: stretch;
	padding:0;
}
.game_scene#idle {
	gap: 1em;
}
.header {
	width:100%;
	height:5em;
	padding:1em;
	background-color:#0009;
	display:flex;
	align-self:start;
	align-items:center;
	justify-content:space-between;
	.image {
		width:30vw;
		height:100%;
		background-size:contain;
		background-position:left center;
		background-repeat:no-repeat;
		&.logo{
			background-image:url('PDQ_logo.png');
		}
	}
	.image:last-child{
		background-position:right center;
	}
}
#setup .header {
	justify-content:center;
	.image {
		background-position: center;
	}
}
.main {
	height:100%;
	padding:1em;
}
.form{
	display:flex;
	flex-direction:column;
	gap:1em;
	margin-top:1em;
}
.grouping {
	display:flex;
	flex-direction:column;
	gap:.3em;
	width:100%;
}
label{
	font-weight:bold;
	color:#FFF;
}
input{
	font-size:1em;
	padding:.75em;
	background-color: #6484C2;
	border: 0;
	color: #FFF;
	font-weight: bold;
	font-family: "Public Sans", sans-serif;
	width:100%;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  background-color: #93F3D6;
  color: #2E186A;
}
.bark {
	background-image: url('venue_bark.jpg');
}
.none {
	background-image: url('venue_none.jpg');
}
.disclaimer {
	font-size:.6em;
	line-height:1.4em;
	font-style: italic;
	opacity:.8;
	margin-top:1.5em;
}
.team_name {
	background-color:#E094CB;
	width:100%;
	text-align:center;
	color:#613482;
	font-size:1.4em;
	font-weight:bold;
	padding:.5em 1em;
}
.status {
	background-color:#8439aa;
	display:flex;
	width:100%;
	padding:.3em 1em;
	justify-content:center;
	color:#DBEFB9;
}
.gameplay {
	height:75%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:1em;
	gap:1em;
	h1 {
		text-align: center;
	.button{
		margin:0;
	}
	#submit {
		background-color:#EAA2C5;
		color:#32176e;
		padding:.5em 0;
		&:hover {
			color:#EAA2C5;
			background-color:#CE6EBF;
			}
		}
	}
}
#waiting{
	width:50%;
	height:auto;
	margin:0 auto;
}
#game_over {
	justify-content:center;
	min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
	
	h1 {
		text-align:center;
		font-size:3em;
		margin:0;
	}
	h2{
		text-align:center;
		margin-top:1em;
		margin-bottom:.5em;
	}
	.pdq{
		flex:0;
		padding-top:0;
		margin:2em;
	}
	.venue{
		margin-top:1em;
		margin-bottom:2em;
		aspect-ratio: 16 / 9;
	}
	.icons{
		display:flex;
		gap:1.5em;
		align-items:center;
		justify-content:center;
		a {
			width:10%;
			color:#8AF2DB;
			transition:color .3s;
			
			&:hover{
				color:#EC9FCD;
			}
		}
	}
}
@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}