.hidden
{
	display:none !important;
}
.invisible
{
	opacity:0 !important;
	pointer-events: none !important;
}

html
{
    font-family:Barlow;
    font-weight:normal;
    font-size: min(0.5vh, 1.1vw);
    font-size: min(0.5dvh, 1.1vw);
}
body
{
	background:black;
	color:white;
}
.grid
{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:#080616 url(../images/background_gradient.png);
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow:hidden;
	transition: background-image 0.5s ease-in-out;
}
h1,h2
{
	font-family: Figtree;
}
h1
{
	font-size:1.6em;
	margin-top:0.5em;
	margin-bottom:0.5em;
}
h2
{
	font-size:0.85em;
	margin:0 auto 0.5em auto;
}
#initialsScreen h1,
#playerOptions h1
{
	font-family: Barlow;
	font-weight: normal;
}
.titleContainer
{
	display:flex;
	justify-content: center;
	align-items:center;
	flex-direction: column;
	width:100%;
}
.nextButton
{
	font-family: Figtree;
	width:4.75em;
	aspect-ratio: 1;
	border:none;
	background:#802673 url(../images/Button.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	display:flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	margin:1em auto;
	transition: transform 0.1s ease-in-out;
	flex-shrink: 0;
}
.nextButton:active
{
	transform: scale(0.93);
}
.nextButton>span
{
	text-transform: uppercase;
	font-size:1.24em;
}
#status
{
	font-size:1.2em;
	width:10em;
}
.loading-dots span
{
	animation: blink 1.4s infinite both;
	display: inline-block;
	font-size: 1.2em;
	letter-spacing: 0.05em;
}
.loading-dots span:nth-child(2)
{
	animation-delay: .2s;
}
.loading-dots span:nth-child(3)
{
	animation-delay: .4s;
}
@keyframes blink
{
	0% {
		opacity: .2;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: .2;
	}
}
.grid>div
{
	box-sizing:border-box;
	padding:0.5em;
	padding-top: max(0.5em, env(safe-area-inset-top));
	padding-bottom: max(0.5em, env(safe-area-inset-bottom));
	padding-left: max(0.5em, env(safe-area-inset-left));
	padding-right: max(0.5em, env(safe-area-inset-right));
	font-size:8em;
	text-align:center;
	display:flex;
	flex-direction: column;
	align-items: center;
	height:100%;
	height:100dvh;
}
#playerColors,
#keyboard,
.instruction
{
	display:flex;
	flex-direction: column;
	justify-content: center;
	background:#36407C;
	border-radius:0.25em;
	padding:0.5em 0.35em;
	flex-grow:0;
	flex-shrink:0;
	width:80vw;
}
.instruction
{
	max-width: 32dvh;
}
#instructionsButton
{
	margin: 0.5em auto;
}
#instructionsContainer
{
	display:flex;
	flex-direction: row;
	justify-content: center;
	gap:1em;
}
.instruction>h2
{
	text-transform: uppercase;
}
.instuctionImageContainer
{
	position:relative;
}
.instuctionImageContainer>img
{
	display:block;
	width:100%;
}
.instuctionImageContainer .playerPreviewContainer
{
	position:absolute;
	font-size: 9vw;
}
.instuctionImageContainer .playerPreview
{
	margin-top:-50%;
	margin-left:-50%;
}
.instruction>span
{
	display:block;
	font-size:1.1em;
	line-height:1.1em;
	font-weight: normal;
	margin:0.5em 0 0 0;
}
#instructions.show3 .instruction
{
	width: 25vw;
	max-width: none;
}
#instructions.show3 .instuctionImageContainer .playerPreviewContainer
{
	font-size: 3vw;
}
#keyboard
{
	flex-direction: column;
	padding:1vw;
	border-radius:0.25em;
	gap:0.25em;
	width: 94vw;
}
#keyboard>div
{
	display:flex;
	justify-content: center;
}
#keyboard>div>div
{
	display:flex;
	justify-content: center;
	align-items: center;
	background:#2D3666;
	font-family: Figtree;
	font-size:0.7em;
	line-height:2em;
	width:8vw;
	max-width:10vh;
	min-height:5vw;
	margin:0.5vw;
	border-radius:0.25em;
	transition: background-color 0.1s ease, transform 0.05s ease;
}
#keyboard>div>div:active
{
	background:#4B5CA0;
	transform: scale(0.9);
}
#keyboard>div>div.backspace
{
	margin-left:0.5vw;
	background-image:url(../images/backspace.png);
	background-size:1.5em;
	background-repeat: no-repeat;
	background-position: center;
}
.fillSpace
{
	width:0;
	height:0;
	flex-grow:1;
}
.playerPreviewAsteroid
{
	background:url(../images/PlayerAsteroid.webp);
	background-size:auto 100%;
	background-position:center;
	background-repeat: no-repeat;
	height:4em;
	width:6em;
	display:flex;
	justify-content: center;
	align-items: center;
}
.playerPreview
{
	width:1.8em;
	height:1.8em;
	line-height:1.7em;
	font-weight:bold;
	font-size:1.6em;
	border:0.1em solid white;
	border-radius:50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.optionsText
{
	font-size:0.8em;
	margin:0.5em auto;
}
#playerColors
{
	flex-direction:row;
	flex-wrap: wrap;
	width:9em;
}
#playerColors div
{
	box-sizing:border-box;
	border:0.1em solid #36407C;
	width:2.5em;
	height:2.5em;
	margin:0.15em;
	border-radius:50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform 0.08s ease;
}
#playerColors div:active
{
	transform: scale(0.85);
}
#playerColors div.selected
{
	border-color:white;
}
#playerColorPreviewAsteroid
{
	display:none;
}
button
{
	font-size:1em;
	padding:0.25em 1em;
}
.joystickContainer
{
	position:absolute;
	left:0;
	bottom:0;
	right:0;
}
#joystickDiv
{
	width:100vw;
	height:100vw;
	max-width:60vh;
	max-height:60vh;
	margin: 0 auto;
}
#scoreHeading
{
	font-size:0.8em;
	margin-top:1em;
	margin-bottom:0.5em;
}
#score,
#scoreUnits
{
	font-weight:normal;
	margin-top:0.5em;
}
#award
{
	width:7em;
	max-width:30vh;
	aspect-ratio: 1;
}
#playAgainButton>span
{
	font-size:1.1em;
}

@keyframes pulse
{
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}
#attractorScreen
{
	background-size: cover;
	background-position: center;
	position:relative;
}
#attractorScreen>img
{
	position:absolute;
	top:50%;
	width:auto;
}
#attractorGlow
{
	height:72vh;
	margin-top:-36vh;
	animation: pulse 1.5s infinite ease-in-out;
}
#attractorButton
{
	height:50vh;
	margin-top:-25vh;
}
@media (min-aspect-ratio:1/1)
{
	html
	{
		font-size: 0.55vh;
		font-size: 0.55dvh;
	}
	h1
	{
		font-size:1.8em;
	}
	.grid>div
	{
		padding:1.5em;
		padding-top: max(1.5em, env(safe-area-inset-top));
		padding-bottom: max(1.5em, env(safe-area-inset-bottom));
		padding-left: max(1.5em, env(safe-area-inset-left));
		padding-right: max(1.5em, env(safe-area-inset-right));
		position: relative;
	}
	.titleContainer
	{
		flex-direction: row;
		gap:1em;
	}
	#playerColorPreviewAsteroid
	{
		display:flex;
	}
	#playerColors
	{
		width:22em;
	}
	#playerColors div
	{
		width:3em;
		height:3em;
		margin:0.25em;
	}
	#instructions
	{
		margin-top:0.5em;
	}
	#instructions>h1
	{
		display:none;
	}
	.joystickContainer
	{
		bottom:1.5em;
	}
	#keyboard
	{
		width: 80vw;
	}
	.nextButton
	{
		position: absolute;
		bottom: 2dvh;
		left: 50%;
		transform: translateX(-50%);
		margin: 0 !important;
	}
	.nextButton:active
	{
		transform: translateX(-50%) scale(0.93) !important;
	}
	#keyboard,
	#playerColors,
	#instructionsContainer,
	#score
	{
		margin-bottom: 24dvh;
	}
}

#joystickDiv, #keyboard, #playerColors, .nextButton
{
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Premium Kiosk Mode Rules for Fixed Landscape Tablets */
body.kiosk,	
body.kiosk .grid,
body.kiosk .grid *
{
	user-select: none !important;
	-webkit-user-select: none !important;
	touch-action: none !important;
	-webkit-tap-highlight-color: transparent !important;
	outline: none !important;
	overscroll-behavior: none !important;
	-webkit-touch-callout: none !important;
}

body.kiosk #attractorButton
{
	cursor: pointer;
}

body.kiosk #attractorScreen>img
{
	top: 53% !important; /* Shifted down from 50% to align with the rest of the UI */
}

body.kiosk #keyboard,
body.kiosk #playerColors
{
	max-width: 92vh; /* Slightly larger hit targets on mounted screens */
}

/* 5% Safe Zone on all sides to account for physical tablet housing/aperture (excluding Attractor Screen) - shifted down 3dvh */
body.kiosk .grid>div:not(#attractorScreen)
{
	position: absolute !important;
	top: 8dvh !important;
	bottom: 2dvh !important;
	left: 5vw !important;
	right: 5vw !important;
	width: 90vw !important;
	height: 90dvh !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Gameplay layout adjustments for Kiosks: Center joystick and move indicator to top */
body.kiosk #gameScreen>h1
{
	display: none !important;
}

body.kiosk #gamePlayerPreview,
.kiosk #gamePlayerPreview,
#gamePlayerPreview
{
	position: fixed !important;
	top: 6dvh !important; /* Shifted down from 3dvh to match the 3dvh grid shift */
	left: 50% !important;
	transform: translateX(-50%) !important;
	font-size: 2.2em !important;
	width: 2.2em !important;
	height: 2.2em !important;
	line-height: 2.1em !important;
	margin: 0 !important;
	z-index: 9999 !important;
}

body.kiosk #gamePlayerPreview,
.kiosk #gamePlayerPreview
{
	border: none !important;
	background: none !important;
}

body.kiosk #gameScreen .joystickContainer
{
	position: absolute !important;
	bottom: auto !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	transform: translate(-50%, -50%) !important;
	width: 60vh !important;
	height: 60vh !important;
}

body.kiosk #joystickDiv
{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

#joystickDiv canvas
{
	display: block;
	width: 100%;
	height: 100%;
}

/* Move Kiosk keyboard up to balance layout */
body.kiosk #keyboard
{
	margin-bottom: 28dvh !important;
}

/* Split colors into 2 rows of 6, matching the exact footprint and height of the keyboard on Kiosks */
body.kiosk #playerColors,
.kiosk #playerColors
{
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 2dvh !important;
	padding: 2.25dvh !important;
	width: 80vw !important;
	max-width: 92vh !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 28dvh !important;
	box-sizing: border-box !important;
	flex: none !important;
	justify-content: center !important;
	align-items: center !important;
}

body.kiosk #playerColors div,
.kiosk #playerColors div
{
	width: 9dvh !important;
	height: 9dvh !important;
	margin: 0 !important;
	justify-self: center !important;
	align-self: center !important;
	border: 0.3dvh solid #2D3666 !important;
	transition: transform 0.08s ease, border-color 0.08s ease !important;
}

body.kiosk #playerColors div.selected,
.kiosk #playerColors div.selected
{
	border-color: #ffffff !important;
	transform: scale(1.1) !important;
}

/* Make next/join button smaller; pin it 50px lower than the landscape-query baseline */
body.kiosk .nextButton,
.kiosk .nextButton
{
	width: 4em !important;
	font-size: 1.15em !important;
	position: absolute !important;
	bottom: calc(2dvh+50px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
}

body.kiosk .nextButton:active,
.kiosk .nextButton:active
{
	transform: translateX(-50%) scale(1) !important;
}