:root {
	--menu-border: max(min(.8vh,.35vw), 3.5px);
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
}

body {
	background: var(--l-blue);
	background-image: url('/games/worm-race/images/bg.png');
	background-size: min(250px, 30vw, 30vh);
	background-blend-mode: overlay;
	font-family: "Yet R", sans-serif;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	
	display: flex;
	@media screen and (width < 1000px) { flex-direction: column; }
}

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

/* default keyboard focus style */
:focus-visible { outline-color: var(--dd-blue); }

/******************************************************************************************
	SCROLLBAR
******************************************************************************************/

/* width */
::-webkit-scrollbar {
	width: 15px;
}
@media (pointer:none), (pointer:coarse) { ::-webkit-scrollbar { width: 5px; } }
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px var(--blue);
	background-color: var(--l-blue);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--blue);
	border-radius: 10px;
}

/******************************************************************************************
	NAVIGATION MENU
******************************************************************************************/
@media screen and (width < 1000px) {
	body:has(#menu.open) > *:not(#menu) { display: none; }
}
#menu {
	position: relative;
	display: flex;
	flex-direction: column;
	
	font-size: min(9vh, min(2em, 3vw));
	text-align: center;
	width: min(23vw, 300px);
	flex-shrink: 0;
	/* background lines */
	--bg-strength: 0.15;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, var(--bg-strength)),
			rgba(255, 255, 255, var(--bg-strength)) 8px,
			transparent 8px,
			transparent 16px
		);
	background-color: var(--green);
	background-blend-mode: overlay;
	border-color: var(--dd-blue);
	border-width: var(--menu-border);
	border-style: hidden; /* hide all borders, define later which should be shown */
	
	/* menu cast shadows */
	@media screen and (width < 1000px) { box-shadow: 0px var(--menu-border) rgb(var(--blue-rgb),0.4); }
	@media screen and (width >= 1000px) { box-shadow: var(--menu-border) 0px rgb(var(--blue-rgb),0.4); }
	
	> header {
		width: 100%;
		padding: .25em;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		background: var(--blue);
		font-family: 'Super Comic', sans-serif;
		letter-spacing: 0.1em;
		color: var(--white);
		text-shadow: .08em .08em var(--dd-blue);
		h1, h2, h3 {
			font-size: inherit;
			margin: 0;
		}
		a { display: block; margin: 0; }
	}
	
	
	nav {
		overflow-y: auto;
		flex-grow: 1; flex-shrink: 1;
		
		display: flex;
		flex-direction: column;
		gap: .25em;
		padding: .4em .6em;
		
		/* navigation buttons */
		a, button {
			color: inherit;
			text-transform: uppercase;
			&:hover, &:focus-visible { color: var(--d-blue); }
			&:focus-visible {
				outline: 2px var(--blue) solid;
				background: var(--white);
				border-radius: 1em;
			}
		}
	}
	
	@media screen and (width >= 1000px) {
		border-right-style: solid;
		.toggle-menu { display: none; }
	}
	@media screen and (width < 1000px) {
		z-index: 1000;
		width: 100%;
		font-size: max(1rem, min(2rem, 4vh));
		
		> header {
			text-align: left;
			h2 { display: none; }
			border-bottom: var(--menu-border) var(--dd-blue) solid;
		}
		
		&:not(.open) > header {
			/* background lines */
			--bg-strength: 0.15;
			background: inherit;
			background-color: inherit;
			background-blend-mode: inherit;
		}
		
		.toggle-menu { height: max(1em,1rem); aspect-ratio: 1; }
			/* bars menu icon */
		.toggle-menu .open {
			background: var(--dd-blue);
			mask: url('/graphix/svg-icons/menu.svg');
			mask-size: 100%;
		}
		.toggle-menu:hover .open { background: var(--blue); }
			/* X menu icon */
		.toggle-menu .close {
			background: var(--white);
			mask: url('/graphix/svg-icons/x.svg');
			mask-size: 100%;
		}
		.toggle-menu:hover .close { background: var(--l-blue); }
		
		&:not(.open) {
			#menu-buttons { display: none; }
			/* hide the "close menu" button when menu is already closed */
			.toggle-menu .close { display: none; }
		}
		&.open {
			position: fixed;
			width: 100%; height: 100%;
			/* hide the "open menu" button when menu is already open */
			.toggle-menu .open { display: none; }
		}
	}
}

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

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

#content-wrapper {
	position: relative;
	flex-grow: 1; flex-shrink: 1;
	height: 100%;
	width: 100%;
	overflow: hidden;
	
	display: flex;
	flex-direction: column;
	
	> header {
		flex-shrink: 0;
		height: min(25%, 35vw);
		@media screen and (width < 400px) { margin-bottom: -7%; }
		@media screen and (width >= 400px) { margin-bottom: -2%; }
		background-size: 100% 95%;
		background-position: bottom;
		background-repeat: no-repeat;
	}
	/* banner and link hidden on worm details page for small screens */
	&:has(.worm-details.show, #guide, #propaganda) {
		> header, .header-link {
			/* heights where banner is hidden */
			@media screen and (
				((aspect-ratio < .65) and (aspect-ratio >= .5))
				or (aspect-ratio >= 2.75)
				or ((width < 1000px) and (aspect-ratio >= 1))
			){
				display: none;
			}
		}
	}
	
	.header-link {
		display: block;
		position: absolute;
		top: 0; left: 50%;
		transform: translateX(-50%);
		height: min(18%, 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 {
	position: relative;
	flex-grow: 1; flex-shrink: 1;
	flex-wrap: wrap;
	width: 100%;
	overflow-y: auto;
	padding-top: min(25%, 35vw);
	margin-top: calc(-1 * min(25%, 35vw));
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* heights where banner is hidden */
	@media screen and (
		((aspect-ratio < .65) and (aspect-ratio >= .5))
		or (aspect-ratio >= 1)
	){
		align-items: center;
	}
	/* allow clicking through to banner links */
	&:has(.worm-details.show) {
		pointer-events: none;
		> * { pointer-events: initial; }
	}
}

/******************************************************************************************
	FOOTER
******************************************************************************************/
#main-footer {
	background: var(--blue);
	border-top: var(--menu-border) var(--dd-blue) solid;
	/* menu cast shadow */
	@media screen and (width >= 1000px) { box-shadow: inset var(--menu-border) 0px rgb(var(--d-blue-rgb),0.5); }
	padding: .3em 1em .4em .5em;
	text-align: right;
	color: var(--white);
	text-transform: uppercase;
	text-shadow: .08em .08em var(--dd-blue);
	a, a:link, a:visited { color: inherit; }
	a:hover { color: var(--l-blue); }
}

/******************************************************************************************
	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 >= .55) and (aspect-ratio < 2.5) {
		aspect-ratio: 3/2;
	}
	@media screen and (aspect-ratio < .55) { 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 >= .55) and (aspect-ratio < 2.5) { max-width: 33%; }
		@media screen and (aspect-ratio < .55) { 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));
			}
		}
}

/******************************************************************************************
	INFO BOX SHARED
******************************************************************************************/
.info-box {
	--color: var(--blue);
	--color-dark: var(--blue);
	--border-radius: 1.5rem;
	--border-radius-sm: calc(var(--border-radius) - var(--menu-border));
	--border: calc(var(--menu-border) * 1.15) var(--dd-blue) solid;
	height: auto;
}
.info-box:not(.worm-details) {
	@media screen and (width >= 1000px) { max-width: min(78%,700px); }
	@media screen and (width < 1000px) { max-width: min(700px,90%); }
}
.info-box header:has(h2, h3), .info-box .items, .info-box .leaderboard .user-data {
	/* background lines */
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.08),
			rgba(255, 255, 255, 0.08) min(8px,.8vw),
			transparent min(8px,.8vw),
			transparent min(16px,1.6vw)
	);
	background-color: var(--color-dark);
	background-blend-mode: screen;
}
.info-box header:has(h2, h3) {
	width: 100%;
	moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
	border: var(--border);
	border-bottom: none;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	overflow: hidden;
	line-height: 1.9em;
	font-size: max(1rem,min(5vh,min(2.5rem, 5.5vw)));
	font-family: "Super Comic", sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--white);
	text-shadow: .08em .08em var(--dd-blue);
	h2, h3 { font-weight: inherit; margin: 0; }
	h2 { font-size: 1em; }
	h3 { font-size: .8em; }
}
.info-box > header:before {
	content: "";
	display: block;
	width: 100%;
	height: 1rem;
	background: white;
}

.info-box .main-container {
	font-size: max(1rem, min(3vw, 2vh));
	
	display: flex;
  flex-direction: column;
	border: var(--border);
	border-top: none;
	background: var(--white);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	height: 100%;
}
.info-box > footer {
	background: var(--dd-blue);
	padding: .25em .6em;
	border-radius: .75em;
	margin: .5rem 0;
	
	color: var(--white);
	font-family: "Super Comic", sans-serif;
	font-size: max(1rem, min(6vw, min(3.5vh, 1.5rem)));
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	button, input[type=submit], a, a:link, a:visited {
		background: none; border: none; color: inherit; font-size: inherit; font-family: inherit;
	}
	button:hover, input[type=submit]:hover, a:hover {
		transform: scale(110%);
	}
	.svg-icon { background: var(--white); }
}
.info-box > .main-container > .details {
	moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
	padding: .5em 1em;
	overflow-y: auto;
	p:first-of-type { margin-top: 0; }
	p:last-of-type { margin-bottom: 0; }
}
.info-box:not(.worm-details) > .main-container >	.details {
	padding: .8em 1.2em 1em 1.2em;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/******************************************************************************************
	INFO BOX POPUPS
******************************************************************************************/
/* tabs to toggle between */
.info-box.popup:not(.show), #worms:not(.show) { display: none; }

/* center popup boxes */
.info-box.popup {
	position: relative;
	margin: 0 auto;
}

/******************************************************************************************
	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 >= .65)
			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: 600px;
	}
	@media screen and ((aspect-ratio < 1) or (width >= 1000px)) {
		max-width: 90%;
	}
	@media screen and (aspect-ratio >= .65) and (aspect-ratio < 2.75) and (width >= 1000px) {
		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;
		@media screen and ((aspect-ratio >= 2.75) or ((width < 1000px) and (height < 500px))) {
			max-width: 50vh;
			margin-bottom: .25em;
		}
		@media screen and (
			(aspect-ratio >= .65)
			and (
				((aspect-ratio < 2.75) and (width >= 1000px))
				or ((height >= 500px) and (width < 1000px))
			)
		){
			width: 50%;
			position: relative;
			margin: -13% 0 -40% -15%;
		}
		@media screen and (aspect-ratio < .65) { width: 60%; margin: 0 auto; }
		@media screen and (aspect-ratio < 1) and (aspect-ratio >= .65) { margin: -8% 0 -40% -8%; }
		@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 < .65) 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: 50%; }
			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 >= .65) or ((aspect-ratio < 1.3) and (width >= 1000px))) {
			width: 60%;
			border-radius: 0 0 0 var(--border-radius-sm);
		}
		@media screen and (aspect-ratio < .65) {
			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%;
		height: 2.1em;
		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 >= .65) {
			width: 55%;
			margin-left: auto;
		}
		@media screen and ((aspect-ratio < .65) 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: max(1rem, min(4vw, 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 .75em .5em .75em;
	}
	
	.tables {
		width: 100%;
		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;
		> * { flex-grow: 1; }
		h4 { font-family: "Super Comic", sans-serif; }
		.table { width: 100%; }
		.row { display: flex; gap: .5em; }
		.row > :first-child { width: 12%; }
		.row > :nth-child(2) { flex-grow: 1; }
		.row > :last-child { width: 20%; text-align: right; }
		.row:first-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: .05em .25em .05em .2em;
	}
	.user-data .item:before {
		content: "";
		display: inline-block;
		height: .9em; aspect-ratio: 1;
		margin-bottom: -.05em;
		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 >= 700px) {
	/* hide the button to open updates */
	#open-updates { display: none; }
}
.updates {
	@media screen and (width >= 1000px) and (height >= 700px) {
		width: min(min(29vw, 50vh), 345px);
	}
	@media screen and ((width < 1000px) or (height < 700px)) 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 >= 700px) {
		rotate: -8deg;
		left: 2%; bottom: 5%;
	}
	@media screen and ((width < 1000px) or (height < 700px)) {
		&:not(.open) { display: none; }
	}
	@media screen and ((width < 1000px) or (height < 700px)) 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 >= 700px)) { 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 >= 700px) {
			font-size: min(1.2em, 2vw); 
		}
		@media screen and ((width < 1000px) or (height < 700px)) {
			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 >= 700px) {
		opacity: 1;
		mix-blend-mode: color-burn;
		rotate: -7deg;
		left: 0.5%; bottom: 3%;
	}
	@media screen and ((width < 1000px) or (height < 700px)) {
		opacity: 0.4;
		rotate: -2deg;
		left: 49%; top: 51%;
	}
}
@media screen and ((width < 1000px) or (height < 700px)) {
	#updates-container:not(.open) + .updates.shadow { display: none; }
}

/******************************************************************************************
	HOVERTEXT
******************************************************************************************/

.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-text {
	position: absolute;
	z-index: 1000;
	bottom: 140%;
	left: 50%; transform: translate(-50%, 0);
	opacity: 0;
	width: 12em;
	background: var(--dd-blue);
	color: var(--white);
	text-align: center;
	font-family: "Yet R", sans-serif;
	font-size: 0.75em;
	border-radius: .5em;
	padding: .5em;
	transition: opacity 0.25s ease-in-out;
	display:none;
}
/* arrow at bottom */
.tooltip .tooltip-text::after {
	content: " ";
	position: absolute;
	top: 100%; left: 50%; transform: translate(-50%, 0);
	border-width: .5em;
	border-style: solid;
	border-color: var(--dd-blue) transparent transparent transparent;
}

.tooltip:hover .tooltip-text, .tooltip:focus-visible .tooltip-text, .tooltip:active .tooltip-text {
  opacity: 0.9;
  display: block;
}
.tooltip:focus-visible { outline: none; }