/* 
* Font: Nunito
* License: SIL Open Font License, Version 1.1 (https://openfontlicense.org)
* The full license text can be found in /resources/Nunito-VariableFont_wght.ttf.OFL.txt
*/
@font-face {
	font-family: "RoundedFontFaceASCIISubset";
	src: url("/resources/Nunito-VariableFont_wght.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}


html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	touch-action: manipulation;
	scroll-behavior: smooth;
	min-height: 100vh;
    min-height: 100svh;
}

/* Global Styles */
html {
	font-size: 16px; /* Set base font size to 16px */
}

body {
	font-family: "Noto Sans", "San Francisco", "Apple System", "Segoe UI", "Arial", "Helvetica Neue", "Times New Roman", "Verdana", sans-serif;
	font-size: 16px; /* Use 16px for body text */
	line-height: 1.5; /* Ensure good readability */
	margin: 0;
	/*padding: 0px 20px 0px 20px;*/
	padding: 0px 0px 0px 0px;

	background-color: black;
}

* {
	word-break: break-word;
}

/* Headings */
h1 {
	font-size: 36px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

h2 {
	font-size: 28px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

h3 {
	font-size: 24px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

h4 {
	font-size: 20px;
	margin: 0;
	padding: 0;
}

h5 {
	font-size: 18px;
	margin: 0;
	padding: 0;
}

h6 {
	font-size: 16px;
	margin: 0;
	padding: 0;
}

p {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

a, a:hover, a:visited {
	font-size: 16px;
	color: #5facff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Lists */
ul, ol {
	margin: 0;
	padding: 0;
}

li {
	font-size: 16px;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 20px;
	margin-bottom: 10px;
}
h3 {
	margin-top: 30px;
}

p {
	margin-bottom: 10px;
}

body {
	color: white;
}

a {
	color: #4ca2ff;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

ul, ol {
	margin-left: 20px;
}

code {
	font-family: monospace;
	background-color: #000000;
	padding: 0 4px;
	border-radius: 4px;
}

pre {
	background-color: #000000;
	padding: 20px;
	border-radius: 4px;
	overflow-x: auto;
}

.container {
	display: flex;
	flex-wrap: wrap; /* Allow items to wrap on smaller screens */
	max-width: 1200px; /* Max width for the container */
	margin: 0px auto; /* Center the container */
	padding: 0 20px; /* Optional padding */
	box-sizing: border-box; /* Include padding in width calculation */
}

.header-links-anchors {
	position: absolute; 
	text-align: right;
	right: 0; 
	bottom: 0px;
	padding-bottom: 9px;
	padding-right: 22px;
}

.header-links-anchors a, .header-links-anchors a:hover, .header-links-anchors a:visited {
	font-weight: bold;
	margin-left: 15px;
	color: white !important;
	text-decoration: none;
	white-space: nowrap;
}

.index, .index * {
	font-size: 16px !important;
}
.index {
	margin-top: 20px;

	/*flex: 0 0 250px;*/
	margin-right: 20px;
	width: 250px;
}
.index.hidden {
	visibility: hidden;
	padding: 0px;
	margin: 0px;
}

.content {
	flex: 1;
	max-width: 100vw;
	min-width: 1px;
}

.index li a:hover {
	text-decoration: none;
	color: white;
}
.index li a {
	color: lightgray;
}

.index ul li {
	margin-bottom: 8px;
}


.widthExpander {
	display: inline-block; 
	height: 5px; 
	overflow-y: hidden;
	white-space: nowrap;
}


@media (max-width: 810px) {
	.container {
		flex-direction: column; /* Stack items vertically on smaller screens */

		/*padding: 0px;*/
	}

	.index {
		margin-right: 0; /* Remove margin on smaller screens */
		margin-bottom: 20px; /* Add space below the index */
	}
}


.metallic-green {
    background: 
        linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%), /* soft highlight */
        linear-gradient(135deg, #004d00, #00cc66); /* main green metallic base */
    /*color: white;*/
    padding: 32px;
    border-radius: 12px;
    box-shadow:
        inset 0 0 8px rgba(0, 255, 128, 0.4),  /* inner glow */
        0 0 12px rgba(0, 255, 128, 0.3);       /* outer glow */
    border: 1px solid rgba(0, 255, 128, 0.5);  /* metallic border */
}

.metallic-red {
    background: 
        linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%), /* soft highlight */
        linear-gradient(135deg, #4d0000, #ff3333); /* main red metallic base */
    /*color: white;*/
    padding: 32px;
    border-radius: 12px;
    box-shadow:
        inset 0 0 8px rgba(255, 51, 51, 0.4),  /* inner glow */
        0 0 12px rgba(255, 51, 51, 0.3);       /* outer glow */
    border: 1px solid rgba(255, 51, 51, 0.5);  /* metallic border */
}


.metallic-blue {
    background: 
        linear-gradient(315deg, rgba(255,255,255,0.2) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%), /* reversed highlight */
        linear-gradient(315deg, #001133, #3399ff); /* main blue metallic base */
    /*color: white;*/
    padding: 32px;
    border-radius: 12px;
    box-shadow:
        inset 0 0 8px rgba(51, 153, 255, 0.4),  /* inner glow */
        0 0 12px rgba(51, 153, 255, 0.3);       /* outer glow */
    border: 1px solid rgba(51, 153, 255, 0.5);  /* metallic border */
}


.metal-shine-purple-to-pink {
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        #2a003f 0%,
        #4b0055 10%,
		#8d0483 100%
        /*#6b0055 60%,*/
        /*#99004d 100%*/
    );
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05),
                0 0 30px rgba(255, 20, 147, 0.1);
}


.mobile-screenshot {
	width: 100%; 
	max-width: 600px; 
	height: auto;
	display: block;
	border-radius: 12px;
}
@media (orientation: portrait) and (max-width: 600px) {
	.mobile-screenshot {
		border-radius: 6px;
	}
}


/*.glow {
	animation: pulseGlow 23s infinite;
}*/
  
/* @keyframes pulseGlow {
	0% {
		box-shadow: 
		0 0 25px #9900ff,
		0 0 30px #f700ff;
	}
	25% {
		box-shadow: 
		0 0 30px #f700ff,
		0 0 25px #9900ff;
	}
	50% {
		box-shadow: 
		0 0 25px #9900ff,
		0 0 30px #f700ff;
	}
	75% {
		box-shadow: 
		0 0 30px #f700ff,
		0 0 25px #9900ff;
	}
	100% {
		box-shadow: 
		0 0 25px #9900ff,
		0 0 30px #f700ff;
	}
} */


.logoImage {
	height: 132px;
	position: relative;
	top: 10px;
}
.logoName {
	font-size: 100px;
	top: -15px; 
	left: 20px;
	white-space: nowrap;
	font-family: "RoundedFontFaceASCIISubset", "Arial Rounded MT Bold", "Arial Rounded", "SF Pro Rounded", "San Francisco Rounded", "Roboto Rounded", "Segoe UI Rounded", "Arial", sans-serif;
}
.logoContent {
	left: 60px;
	white-space: nowrap
}

.footer-links .content a, .header-links .content a {
	margin-right: 15px;
	color: white !important;
	text-decoration: none;
	white-space: nowrap;
}
.footer-links {
	padding: 0px !important;
}


.no-select {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}


@media (max-width: 1240px) {
	.logoImage {
		height: calc(132/1240*100vw);
		top: calc(10/1240*100vw);
	}
	.logoName {
		top: calc(-15/1240*100vw); 
		left: calc(20/1240*100vw);
		font-size: calc(100/1240*100vw);
	}
	.logoContent {
		left: calc(60/1240*100vw);
	}

	/*.getitongoogleplaybadge,*/ .getitonappstorebadge, .downloadandroidapkbadge {
		height: calc(100/1240*100vw);
	}


	.install-buttons-container a img {
		height: min(calc(100/1240*90vw), 50px);
		max-height: 50px;
		min-height: 25px;
	}
	
	.getitonstorespacing {
		font-size: calc(11/1240*100vw) !important;
	}


	.footer-links {
		padding: 0px !important;
	}

	.header-links {
		min-height: 111px;
	}


	.widthExpander {
		display: none; 
	}
}







pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
}

code {
    white-space: pre-wrap;
}






/* Update the dropdown wrapper */
.dropdown {
    flex: 0 0 100%; /* Keeps it on its own row at the top */
	margin-top: 30px;
    margin-bottom: 0px;
}

/* Update the select element to match your index width */
.dropdown_select_language {
    width: 250px; /* Matches your .index width exactly */
    box-sizing: border-box;
    background-color: #1a1a1a; 
    color: white; 
    padding: 10px 35px 10px 15px;
    font-size: 16px;
    border: 1px solid #444;
    border-radius: 6px;
    
    /* Pretty UI bits */
    appearance: none; 
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    
    /* Custom Arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}


@media (max-width: 810px) {
    .dropdown_select_language {
        width: 100%; 
    }
}


.install-buttons-container {
	padding: 0px !important; 
	text-align: right;
	white-space: nowrap;
	container-type: inline-size;
	width: 100%;
}


#Multiplayer, #Friendslop-party-game, #Single-player, .rainbow-text {
    background: linear-gradient(
        90deg,
		#ff0088,
		#ff0000, 
    	#ff8800,
    	#ffee00,
    	#00ff88,
		#00ff88,
		#ffee00,
		#ff8800,
		#ff0000,
		#ff0088
    );

    background-size: 300% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: rainbow-flow 10s linear infinite;
}

@keyframes rainbow-flow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 300% 50%;
    }
}



dialog h3, dialog div {
	font-family: RoundedFontFaceASCIISubset;
	text-decoration: none;
	text-transform: none;
	color: white;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6); /* Darkens the background by 60% */
  backdrop-filter: blur(3px);           /* Optional: Adds a nice modern blur effect */
}
dialog button {
  all: unset; /* Wipes out the ugly browser defaults */
  box-sizing: border-box;
  display: inline-block;
  
  /* Sizing & Typography */
  padding: 8px 20px;
  min-width: 80px;
  text-align: center;
  border-radius: 6px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  
  /* Colors (Clean, versatile green) */
  background-color: #096647;
  color: #ffffff;
  border: 1px solid #059669;
  
  /* Feel & Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}
/* Hover / Mouse over */
dialog button:hover {
  background-color: #059669;
  border-color: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

button.metallic-red-button {
  background-color: #661a09;
  color: #ffffff;
  border: 1px solid #960505;
}
button.metallic-red-button:hover {
  background-color: #960505;
  border-color: #782904;
}

/* Active / Pressed down */
dialog button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.15);
}

/* Focus state for keyboard users */
dialog button:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}