/* disabled element style */
:not(.tooltip):disabled, .tooltip:disabled .text, :disabled + label { opacity: 0.45; }

/******************************************************************************************
	MAIN CONTENT
******************************************************************************************/

#content-wrapper:not(:has(.worm-details.show)) > header {
	z-index: 10;
}

#content-wrapper {
	#header-banner {
		position: relative;
		flex-shrink: 0;
		height: min(24vh, 35vw);
		width: 100%;
		@media screen and (aspect-ratio < .61) { margin-bottom: -7%; }
		@media screen and (aspect-ratio >= .61) { margin-bottom: -3%; }
		background-size: 100% 95%;
		background-position: bottom;
		background-repeat: no-repeat;
		pointer-events: none;
		> * { pointer-events: initial; }
	}
	/* banner and link hidden on worm details page for small screens */
	@media screen and (
		((aspect-ratio < .61) and (aspect-ratio >= .5))
		or (aspect-ratio >= 2.75)
		or ((width < 1000px) and (aspect-ratio >= 1))
	){
		/*#content { align-items: center; }*/
		
		&:has(.worm-details.show, #guide, #propaganda) {
			#header-banner, .header-link {
				display: none;
			}
		}
	}
	
	.header-link {
		display: block;
		position: absolute;
		top: 0; left: 50%;
		transform: translateX(-50%);
		height: min(75%, 25.5vw);
		width: min(66%, 600px);
		color: var(--dd-blue);
		&:hover { color: var(--blue); }
		text-align: center;
		h3 {
			margin: 0px;
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: min(4vh,min(2rem, 5vw));
			font-weight: normal;
		}
	}
}

#content {
	align-items: flex-start;
	@media screen and (aspect-ratio >= 1) { align-items: center; }
	
	/* allow clicking through to banner links */
	&:has(.worm-details.show) {
		pointer-events: none;
		> * { pointer-events: initial; }
		/* heights where banner is hidden */
		align-items: center;
		@media screen and (
			((aspect-ratio < .61) and (aspect-ratio >= .5))
			or (aspect-ratio >= 2.75)
			or ((width < 1000px) and (aspect-ratio >= 1))
		){ align-items: center; }
	}
}

/******************************************************************************************
	WORM SELECTION
******************************************************************************************/
#worms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-height: 95%;
	/* narrower when updates sticky note displayed */
	@media screen and (aspect-ratio < 2.5) { max-width: 85%; }
	/* 6 worms per row super wide screens, 3 per row wide screens, 2 per row narrow screens */
	@media screen and (aspect-ratio >= 2.5) { aspect-ratio: 6; }
	@media screen and (aspect-ratio >= .61) and (aspect-ratio < 2.5) {
		aspect-ratio: 3/2;
	}
	@media screen and (aspect-ratio < .61) { aspect-ratio: 2/3; }
}
#worms > a, #worms button {
		padding: 1%;
		display: block;
		/* 6 worms per row super wide screens, 3 per row wide screens, 2 per row narrow screens */
		@media screen and (aspect-ratio >= 2.5) { max-width: 16%; }
		@media screen and (aspect-ratio >= .61) and (aspect-ratio < 2.5) { max-width: 33%; }
		@media screen and (aspect-ratio < .61) { width: min(90vw, max(50%, 100px)); }
		aspect-ratio: 1/1;
		img { width: 100%; height: 100%; }
		
		&:hover, &:focus-visible {
			img {
				transform: scale(104%);
				filter: drop-shadow(0px 0px 10px var(--white));
			}
		}
		img {
			pointer-events: none;
		}
}

/******************************************************************************************
	WORM DETAILS
******************************************************************************************/

.info-box.popup.worm-details.show {
	@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
		display: flex;
		gap: 1rem;
	}
}
.info-box.popup.worm-details:has(.main-worm-tab:not(.hidden)) {
	header h2, header h3 {
		@media screen and (aspect-ratio >= .61)
			and (((width < 1000px) and (height >= 500px)) or ((width > 1000px) and (aspect-ratio < 2.75)))
		{
			width: 70%;
			margin-left: auto;
			text-wrap: nowrap;
		}
	}
}

.info-box.popup.worm-details:has(.leaderboard:not(.hidden)) {
	@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
		header:has(h2), header:has(h3) {
			display: none;
		}
	}
}
.info-box.popup.worm-details {
	@media screen and (aspect-ratio >= 1) and (width < 1000px) {
		width: 80%;
		min-width: 500px;
	}
	@media screen and ((aspect-ratio < 1) or (width >= 1000px)) {
		width: 1100px;
		max-width: 90%;
	}
	@media screen and (aspect-ratio >= .61) and (aspect-ratio < 2.75) and (width >= 1000px) {
		width: min(720px,80%);
		min-width: min(650px, 90vh);
	}
	
	@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
		margin: auto 0;
		padding: 1rem;
		moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
		height: 80vh;
		justify-content: center;
		align-items: center;
		header h2 { min-width: 12em; }
	}
	
	/* allow clicking through to banner links */
	:has(> .main-image) { pointer-events: none; }
	:has(> .main-image) * { pointer-events: initial; }
	
	.main-image {
		z-index: 2;
		
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2vw;
		
		/* next/prev worm buttons */
		button {
			display: block;
			@media screen and (aspect-ratio >= .61) {
				display: none; /* hide buttons on wide screens */
			}
			border-radius: 50%;
			
			i.svg-icon { background: var(--white); margin-top: -.028em; padding-bottom:.028em; }
			&:first-of-type { i.svg-icon { margin-left: -.18em; } }
			&:last-of-type { i.svg-icon { margin-right: -.18em; } }
			
			&:hover i.svg-icon { transform: scale(1.15); }
			
			background: var(--dd-blue);
			width: 13vw; height: 13vw;
			flex-shrink: 0;
			font-size: 9vw;
			padding: .5rem;
		}
		
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			max-width: 50vh;
			margin-bottom: .25em;
		}
		@media screen and (
			(aspect-ratio >= .61)
			and (
				((aspect-ratio < 2.75) and (width >= 1000px))
				or ((height >= 500px) and (width < 1000px))
			)
		){
			width: 45%;
			position: relative;
			margin: -5% 0 -40% -15%;
		}
		@media screen and (aspect-ratio < .61) { width: 60%; margin: 0 auto 2% auto; }
		@media screen and (aspect-ratio < 1) and (aspect-ratio >= .61) { margin: -8% 0 -40% -13%; }
		@media screen and (aspect-ratio >= 1.3) and (width < 1000px) and (height >= 500px) {
			margin: 0% 0% -40% -15%;
			max-width: 70vh;
		}
		/* heights where banner is hidden (minus extra wide view) */
		@media screen and (
			((aspect-ratio < .61) and (aspect-ratio >= .5))
			or ((width < 1000px) and (aspect-ratio >= 1) and (aspect-ratio < 2.75))
		){
			margin-top: -3%;
		}
		/* fit image in container */
		img {
			max-width: 100%; max-height: 100%;
			pointer-events: none;
			user-select: none;
		}
	}
	
	.main-container.worm-main {
		justify-content: space-between;
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			@media screen and (width >= 1000px) { width: 32vw; }
			@media screen and (width < 1000px) { width: 100%; }
			border-top: var(--border);
			border-radius: var(--border-radius);
		}
	}
	.health-section {
		width: 100%;
		moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
		background: var(--white);
		border: var(--border);
		border-top: none; 
		@media screen and (((width >= 1000px) and (aspect-ratio < 2.75)) or ((width < 1000px) and (height >= 500px))) {
			--border-radius: min(1em, max(3vh, .7em));
			border-bottom: none;
		}
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			border-radius: 0 0 var(--border-radius) var(--border-radius);
			border-bottom: var(--border);
		}
	}
	.health-section > .wrapper {
		font-size: 1rem;
		display: flex;
		flex-grow: 0;
		margin-left: auto;
		border: .5em var(--color) solid;
		background: var(--color);
		moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
		@media screen and ((aspect-ratio >= .61) or ((aspect-ratio < 1.3) and (width >= 1000px))) {
			width: 60%;
			border-radius: 0 0 0 var(--border-radius-sm);
		}
		@media screen and (aspect-ratio < .61) {
			width: 100%;
		}
		@media screen and (aspect-ratio < 2.75) {
			height: max(1.5em, min(2.5em, 6vh));
		}
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			width: 100%;
			border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
			height: 10vh;
			border-width: 2vh;
		}
	}
	.health-bar {
		background: var(--white);
		border-radius: .8em 0 0 .8em;
		overflow: hidden;
		height: 100%;
		width: 95%;
		display: flex;
		gap: max(.2em, 2px);
		border: max(.2em, 2px) var(--white) solid;
		moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
	}
	.health-bar .unit { height: 100%; flex-grow: 1; background: none; }
	.health-0 .unit:nth-of-type(1) { background: var(--red); max-width: 10%; }
	.health-1 .unit:nth-of-type(1) { background: var(--green); }
	.health-2 .unit:nth-of-type(-n+2) { background: var(--green); }
	.health-3 .unit:nth-of-type(-n+3) { background: var(--green); }
	.health-4 .unit { background: var(--green); }
	.health-icon {
		background: url('images/icon-health-pos.png');
		background-size: auto 100%;
		aspect-ratio: 1;
		margin-top: -.4em;
		margin-left: -1em;
	}
	
	.details {
		color: var(--color-dark);
		font-size: max(1rem, min(4vw, 3vh));
	}
	.details {
		display: flex; flex-direction: column;
		justify-content: center;
		@media screen and (aspect-ratio >= .61) {
			width: 55%;
			margin-left: auto;
		}
		@media screen and ((aspect-ratio < .61) or (aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			width: 100%;
			text-align: center;
			flex-grow: 1;
		}
		
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			font-size: max(.8rem, min(vw,5vh));
		}
	}
	
	> footer {
		@media screen and (
			(aspect-ratio >= 2.75)
			or ((width < 1000px) and (height < 500px))
			or (width < 260px)
		){
			justify-content: center;
			align-items: center;
			flex-direction: column-reverse;
			gap: .5em;
			background: none;
			padding: 0px;
			> * {
				background: var(--dd-blue);
				padding: .5em 1em;
				border-radius: var(--border-radius);
				width: 7em;
			}
		}
	}
}
	
/* feedable item buttons */
.worm-details {
	.items, .leaderboard .user-data {
		border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
		border: min(.6rem,calc(var(--menu-border) * 2)) var(--white) solid;
		moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
		flex-grow: 1;
	}
	.items .buttons {
		width: 95%;
		margin: 0 auto;
		margin-top: -1em;
		margin-bottom: -.5em;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1%;
	}
	.item-wrapper {
		position: relative;
		@media screen and (aspect-ratio < 2.75) {
			max-width: min(12vh,min(100px,25%)); min-width: min(40px, 50%);
		}
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			max-width: min(50%, 20vh);
		}
		flex-grow: 1;
		aspect-ratio: 1;
	}
	.item-wrapper > div {
		width: 100%; height: 100%;
		border-radius: 100%;
		background: var(--white);
	}
	.item-wrapper > div > * {
		position: absolute;
		margin: 0px;
		width: 100%; height: 100%;
		border-radius: 100%;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%) scale(90%);
	}
	.item-wrapper:after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0; right: -3%;
		width: 30%; height: 30%;
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
	.item-input {
		z-index: 2;
		opacity: 0;
	}
	.item {
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.item-wrapper .item {
		webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
	}
	.item-wrapper:has(input[type=radio]:checked, input[type=radio]:focus-visible) .item {
		border: var(--menu-border) var(--dd-blue) solid;
		background-size: calc(80% + var(--menu-border) * 1.5);
	}
	.item-wrapper:has(input[type=radio]:focus-visible) .item {
		transform: translate(-50%,-50%);
	}
	.item-wrapper:hover:has(input[type=radio]:not(:disabled)) .item {
		transform: translate(-50%,-50%);
	}
	label[for=apple-input] {
		background-color: var(--l-green);
		background-image: url('/games/worm-race/images/apple.png');
	}
	.item-wrapper:has(label[for=apple-input]):after { background-image: url('images/icon-progress-1.png'); }
	label[for=drink-input] {
		background-color: var(--l-blue);
		background-image: url('/games/worm-race/images/drink.png');
	}
	.item-wrapper:has(label[for=drink-input]):after { background-image: url('images/icon-progress-2.png'); }
	label[for=heal-input] {
		background-color: var(--l-pink);
		background-image: url('/games/worm-race/images/heal.png');
	}
	.item-wrapper:has(label[for=heal-input]):after { background-image: url('images/icon-health-pos.png'); }
	label[for=poison-input] {
		background-color: var(--green);
		background-image: url('/games/worm-race/images/poison.png');
	}
	.item-wrapper:has(label[for=poison-input]):after { background-image: url('images/icon-health-neg.png'); }
	.items .description {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 5em;
		font-size: max(1rem, min(4vh, min(1.4rem, 4vw)));
		flex-grow: 0;
		color: var(--white);
		.empty-text {
			font-size: max(1rem, min(4vh, min(2em, 7vw)));
			text-transform: uppercase;
			text-shadow: .08em .08em var(--dd-blue);
		}
		.name {
			font-weight: bold;
			text-transform: uppercase;
		}
		.info img { height: 1em; margin-bottom: -.15em; margin-left: .2em; }
		.subtitle {
			font-size: .85em;
			font-style: italic;
		}
	}
	.items .description.empty .info { display: none; }
	.items .description:not(.empty) .empty-text { display: none; }
}


.leaderboard {
	color: var(--color-dark);
	font-size: min(1.5rem, max(1rem, min(3vw, 3vh)));
	flex-grow: 1;
	display: flex; flex-direction: column; justify-content: space-between;
	overflow-y: auto;
	
	h4 {
		margin: 0;
		text-align: center;
		font-size: max(1.25em, 1vw);
	}
	
	.box-wrapper {
		min-width: min(200px, 100%);
		border: var(--menu-border) var(--color) solid;
		border-radius: var(--border-radius-sm);
		padding: .25em .4em .5em .4em;
	}
	
	.tables {
		width: 100%;
		min-height: 70%;
		overflow-y: auto;
		display: flex; flex-wrap: wrap;
		gap: .5em;
		margin-bottom: .25em;
		padding: .5em .75em 0em .75em;
		moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
		justify-content: center;
		> * {
			width: 40%;
			flex-grow: 1;
		}
		h4 { font-family: "Super Comic", sans-serif; }
		.table { width: 100%; }
		.row { display: flex; gap: .25em; }
		.row > :first-child { width: 10%; flex-shrink: 0; }
		.row > :nth-child(2) { flex-grow: 1; }
		.row > :last-child { width: 20%; text-align: right; }
		.row:first-of-type > *:not(:first-of-type, :last-of-type) { font-weight: bold; }
	}
	
	.user-data {
		text-align: center; 
		color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.user-data header {
		text-shadow: 2px 3px var(--dd-blue);
		margin-bottom: .2em;
		text-transform: uppercase;
	}
	.user-data span {
		display: inline-block;
	}
	.user-data .log-in {
		font-size: .9em;
		font-style: italic;
	}
	.user-data .item {
		font-size: 1.15em;
		color: var(--color-dark);
		background: var(--white);
		border-radius: .5em;
		padding: .1em .25em .1em .2em;
	}
	.user-data .item:before {
		content: "";
		display: inline-block;
		height: .9em; aspect-ratio: 1;
		margin-bottom: -.08em;
		margin-right: .1em;
		background-size: 100%;
	}
	.user-data .apple:before { background-image: url('images/apple.png'); }
	.user-data .drink:before { background-image: url('images/drink.png'); }
	.user-data .heal:before { background-image: url('images/heal.png'); }
	.user-data .poison:before { background-image: url('images/poison.png'); }
}


/******************************************************************************************
	UPDATES
******************************************************************************************/
@media screen and (width >= 1000px) and (height >= 750px) {
	/* hide the button to open updates */
	#open-updates { display: none; }
}
.updates {
	@media screen and (width >= 1000px) and (height >= 750px) {
		width: min(min(29vw, 50vh), 345px);
	}
	@media screen and ((width < 1000px) or (height < 750px)) and (height >= 400px) {
		width: min(90vw,max(min(30vh,70vw), 350px));
		transform: translate(-50%,-50%);
	}
	@media screen and (height >= 400px) {
		position: absolute;
		aspect-ratio: 1/1;
	}
	@media screen and (height < 400px) {
		position: fixed;
		width: 100%;
		height: 100%;
	}
}
#updates-container {
	z-index: 1100;
	border: var(--menu-border) var(--dd-blue) solid;
	border-top-color: var(--d-blue);
	box-shadow: var(--menu-border) var(--menu-border) 0 var(--l-green) inset;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	
	/* background lines */
	background:
		repeating-linear-gradient(
			to bottom,
			var(--white),
			var(--white) 1.75em,
			var(--yellow) 1.75em,
			var(--yellow) calc(1.75em + 1px)
		);
	background-color: var(--yellow);
	background-blend-mode: multiply;
	
	@media screen and (width >= 1000px) and (height >= 750px) {
		rotate: -8deg;
		left: 2%; bottom: 5%;
	}
	@media screen and ((width < 1000px) or (height < 750px)) {
		&:not(.open) { display: none; }
	}
	@media screen and ((width < 1000px) or (height < 750px)) and (height >= 400px) {
		rotate: -4deg;
		left: 56%; top: 48%;
	}
	
	> .wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 1rem;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		
		> .close {
			position: absolute;
			@media screen and (height >= 400px) { left: 0; top: 0; }
			@media screen and (height < 400px) { left: 2em; top: 1.5em; }
			transform: translate(-50%,-50%);
			background: var(--red);
			color: var(--white);
			border-radius: 50%;
			padding: .45em;
			border: calc(var(--menu-border) * .9) var(--dd-blue) solid;
			box-shadow: 0 var(--menu-border) 0 rgba(var(--d-blue-rgb), .4);
			@media screen and ((width >= 1000px) and (height >= 750px)) { display: none; }
		}
		.close .svg-icon { background: var(--white); }
	}
	
	--header-height: 1.5rem;
	header {
		height: var(--header-height);
		text-transform: uppercase;
		text-align: center;
		color: var(--d-orange);
		font-family: "Super Comic", sans-serif;
		letter-spacing: 0.1em;
		
		@media screen and (width >= 1000px) and (height >= 750px) {
			font-size: min(1.2em, 2vw); 
		}
		@media screen and ((width < 1000px) or (height < 750px)) {
			font-size: min(1.2em, 5.5vw); 
		}
		a, a:link { color: inherit; }
		a:hover { color: var(--red); }
	}
	iframe {
		width: min(100%, 450px);
		display: block;
		margin: 0 auto;
		height: calc(100% - var(--header-height));
	}
}

.updates.shadow {
	z-index: 99;
	background: var(--blue);
	-webkit-clip-path: polygon(5% 0, 100% 0, 100% 98%, 0% 100%);
	clip-path: polygon(5% 0, 100% 0, 100% 98%, 0% 100%);
	pointer-events: none;
	
	@media screen and (width >= 1000px) and (height >= 750px) {
		opacity: 1;
		mix-blend-mode: color-burn;
		rotate: -7deg;
		left: 0.5%; bottom: 3%;
	}
	@media screen and ((width < 1000px) or (height < 750px)) {
		opacity: 0.4;
		mix-blend-mode: multiply;
		rotate: -2deg;
		left: 51%; top: 51%;
	}
}
@media screen and ((width < 1000px) or (height < 750px)) {
	#updates-container:not(.open) + .updates.shadow { display: none; }
}