* {
  user-select: none;
}

:root {
  --char-ani: 20s;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#start {
	position: absolute;
	display: inline;
	top: 45%;
	left: 45%;
	width: 10%;
	height: 10%;
	z-index: 20;
}

#control {
  width: 100vw;
  height: 100vh;
  background-color: #0f3051;
  background-image: url('images/bg.webp');
  background-size: contain;
  background-position: center;
  background-repeat: repeat-x;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.bg-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 35.468vh;
  aspect-ratio: 1920 / 371;
  background-image: url('images/top_back.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1;
}

.front-battlefield {
  position: absolute;
  top: 31.166vh;
  left: 50%;
  transform: translateX(-50%);
  height: 60.707vh;
  aspect-ratio: 1920 / 635;
  background-image: url('images/field.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 50;
}

.char-cripps {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 53.154vh;
  aspect-ratio: 520 / 556;
  background-image: url('images/cripps.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 20;
  animation: cripps var(--char-ani) ease-in-out infinite;
}

.char-scienist {
  position: absolute;
  top: 7.265vh;
  left: 50%;
  transform: translateX(44.52%);
  height: 42.734vh;
  aspect-ratio: 275 / 447;
  background-image: url('images/scienist.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 15;
  animation: scienist var(--char-ani) ease-in-out infinite;
}

.char-girl {
  position: absolute;
  top: 7.265vh;
  left: 50%;
  transform: translateX(-186%);
  height: 42.734vh;
  aspect-ratio: 201 / 447;
  background-image: url('images/btch.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 15;
  animation: girl var(--char-ani) ease-in-out infinite;
}

.char-dog {
  position: absolute;
  top: 35.468vh;
  left: 50%;
  transform: translateX(-280%);
  height: 17.686vh;
  aspect-ratio: 118 / 185;
  background-image: url('images/dog.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 25;
  animation: dog var(--char-ani) ease-in-out infinite;
}

.sol-base {
  position: absolute;
  left: 50%;
  aspect-ratio: 238 / 378;
  background-image: url('images/soldier.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

.sol-1 {
  top: 10vh;
  transform: translateX(-128%);
  height: 36.137vh;
  filter: brightness(0.7) contrast(0.9) sepia(1) hue-rotate(140deg) saturate(150%) opacity(1);
  z-index: 5;
  animation: sol1 var(--char-ani) ease-in-out infinite;
}

.sol-2 {
  top: 9vh;
  transform: translateX(11%);
  height: 34vh;
  filter: brightness(0.7) contrast(0.9) sepia(1) hue-rotate(140deg) saturate(150%) opacity(1);
  z-index: 5;
  animation: sol2 var(--char-ani) ease-in-out infinite;
}

.sol-3 {
  top: 17.5vh;
  transform: translateX(-234%);
  height: 33vh;
  filter: brightness(0.55) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%) opacity(1);
  z-index: 5;
  animation: sol3 var(--char-ani) ease-in-out infinite;
}

.sol-4 {
  top: 17.5vh;
  transform: translateX(144%);
  height: 33vh;
  filter: brightness(0.55) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%) opacity(1);
  z-index: 5;
  animation: sol4 var(--char-ani) ease-in-out infinite;
}

.sol-5 {
  top: 19vh;
  transform: translateX(-334%);
  height: 33vh;
  filter: brightness(0.85) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%) opacity(1);
  z-index: 5;
  animation: sol5 var(--char-ani) ease-in-out infinite;
}

.sol-6 {
  top: 19vh;
  transform: translateX(244%);
  height: 33vh;
  filter: brightness(0.85) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(150%) opacity(1);
  z-index: 5;
  animation: sol6 var(--char-ani) ease-in-out infinite;
}

.sol-7 {
  top: 19vh;
  transform: translateX(-414%);
  height: 33vh;
  filter: brightness(0.9) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(1);
  z-index: 5;
  animation: sol7 var(--char-ani) ease-in-out infinite;
}

.sol-8 {
  top: 19.8vh;
  transform: translateX(334%);
  height: 32vh;
  filter: brightness(0.9) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(1);
  z-index: 5;
  animation: sol8 var(--char-ani) ease-in-out infinite;
}

.sol-9 {
  top: 20vh;
  transform: translateX(-293%);
  height: 30vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(1);
  z-index: 4;
  animation: sol9 var(--char-ani) ease-in-out infinite;
}

.sol-10 {
  top: 20vh;
  transform: translateX(234%);
  height: 30vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(1);
  z-index: 4;
  animation: sol10 var(--char-ani) ease-in-out infinite;
}

.sol-11 {
  top: 21vh;
  transform: translateX(-433%);
  height: 28vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.6);
  z-index: 3;
  animation: sol11 var(--char-ani) ease-in-out infinite;
}

.sol-12 {
  top: 21vh;
  transform: translateX(334%);
  height: 28vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.6);
  z-index: 3;
  animation: sol12 var(--char-ani) ease-in-out infinite;
}

.sol-13 {
  top: 21vh;
  transform: translateX(-370%);
  height: 26vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.5);
  z-index: 2;
  animation: sol13 var(--char-ani) ease-in-out infinite;
}

.sol-14 {
  top: 21vh;
  transform: translateX(234%);
  height: 26vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.5);
  z-index: 2;
  animation: sol14 var(--char-ani) ease-in-out infinite;
}

.sol-15 {
  top: 22vh;
  transform: translateX(-543%);
  height: 27vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.3);
  z-index: 2;
  animation: sol15 var(--char-ani) ease-in-out infinite;
}

.sol-16 {
  top: 22vh;
  transform: translateX(454%);
  height: 27vh;
  filter: brightness(0.8) contrast(0.95) sepia(1) hue-rotate(140deg) saturate(120%) opacity(0.3);
  z-index: 2;
  animation: sol16 var(--char-ani) ease-in-out infinite;
}


.vechicle-submarine {
  position: absolute;
  top: 60.611vh;
  left: 50%;
  transform: translateX(117.227%);
  height: 18.546vh;
  aspect-ratio: 398 / 194;
  background-image: url('images/submarine.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 55;
  animation: wave-submarine 6.5s ease-in-out infinite;
}

.vechicle-copter1 {
  position: absolute;
  top: 40.057vh;
  left: 50%;
  transform: translateX(-387.227%);
  height: 7.934vh;
  aspect-ratio: 143 / 83;
  background-image: url('images/copter1.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 55;
  animation: hover-copter-1 6s ease-in-out infinite;
}

.vechicle-copter2 {
  position: absolute;
  top: 38.623vh;
  left: 50%;
  transform: translateX(152.227%);
  height: 9.369vh;
  aspect-ratio: 157 / 98;
  background-image: url('images/copter2.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 55;
  animation: hover-copter-2 5s ease-in-out infinite;
}

.vechicle-aircraft {
  position: absolute;
  top: 52.39vh;
  left: 50%;
  transform: translateX(-232.227%);
  height: 10.038vh;
  aspect-ratio: 221 / 105;
  background-image: url('images/aircraft.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 51;
}

.vechicle-fighter {
  position: absolute;
  top: 57.361vh;
  left: 50%;
  transform: translateX(-222.227%);
  height: 21.797vh;
  aspect-ratio: 401 / 228;
  background-image: url('images/fighter.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 53;
  animation: loop-fighter 4s ease-in-out infinite;
}

.vechicle-rocket {
  position: absolute;
  top: 62.428vh;
  left: 50%;
  transform: translateX(-242.227%);
  height: 12.237vh;
  aspect-ratio: 273 / 129;
  background-image: url('images/rocket.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 52;
  animation: loop-rocket 5.5s ease-in-out infinite;
}

#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* */
.game-progress {
	position: relative;
	top: 47.131vh;
	left: 50%;
	transform: translateX(-50%);
	height: 5.353vh;
	aspect-ratio: 510 / 56;
	background: linear-gradient(to bottom, #b43300, #d66400);
	background-size: 1vh 0.4vh;
	border: 0.3vh solid #ffffa4;
	border-radius: 1.2vh;
	box-shadow: inset 0px 0px 5px 4px #8f2500, 0px 0px 10px 5px #ffb40090;
	z-index: 110; 
}

#progress-splash {
	display: none;
}
#progress-splash.visible {
	display: flex;
}

.game-progress .progress-spinner {
	position: absolute;
	top: 1.28vh;
	left: 1.4vh;
	transform: translateY(-50%);
	width: 1.5vh;
	height: 1.5vh;
	font-size: 1.5vh;
	text-indent: -9999em;
	border-top: .5em solid #77260050;
	border-right: .5em solid #77260050;
	border-bottom: .5em solid #77260050;
	border-left: .5em solid #fffc2f;
	border-radius: 50%;
	animation: 2s linear infinite spinner-animation;
	z-index: 30;
}

.bold-text {
  position: absolute;
  left: 50%;
  width: 48.757vh;
  text-align: center;
  transform: translateX(-50%);
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  text-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 1);
}

.game-progress .progress-percent {
	top: 1.0vh;
	font-size: 3vh;
	color: white;
	z-index: 120;
}

.game-progress .game-progress-bar {
	position: relative;
	width: 0%;
	height: 100%;
	border-radius: 0.8vh;
	background: linear-gradient(to bottom, #ffee00, #c45f00);           
	box-shadow: inset 0px 0px 5px 5px #ffbb0090, 0px 0px 2px 2px #551800a0;
	transform-origin: left;
	z-index: 25;
	transition: width 1.0s ease;
}

.game-progress .progress-wrapper {
	position: absolute;
	top: 0.2vh;
	left: 0.2vh;
	right: 0.2vh;
	bottom: 0.2vh;
	box-sizing: border-box;
	z-index: 26;
}

.bottom-line1 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13.383vh;
  background-color: rgba(16, 36, 61, 0.5);
  z-index: 50;
}

.bottom-line2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.206vh;
  background-color: #10243d;
  font-family: 'Roboto', sans-serif;
  font-weight: 600; /* semibold */
  font-size: 1.35vh;
  color: #567dae;
  text-align: center;
  line-height: 4.206vh;
  user-select: none;
}

.bottom-logo1 {
  position: absolute;
  top: 86.615vh;
  left: 50%;
  transform: translateX(-180%);
  height: 9.177vh;
  aspect-ratio: 147 / 96;
  background-image: url('images/logo-astralax.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 130;
}

.bottom-logo2 {
  position: absolute;
  top: 86.615vh;
  left: 50%;
  transform: translateX(-70%);
  height: 9.177vh;
  aspect-ratio: 161 / 96;
  background-image: url('images/logo-fmod.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 131;
}

.bottom-logo3 {
  position: absolute;
  top: 88.327vh;
  left: 50%;
  transform: translateX(410%);
  height: 5.736vh;
  aspect-ratio: 50 / 60;
  background-image: url('images/logo-pegi.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 132;
}

.top-text-1 {
  top: 40vh;
  font-size: 2.4vh;
  color: white;
  z-index: 110;
}

.top-text-2 {
  top: 42.8vh;
  font-size: 1.725vh;
  color: #ffec00;
  z-index: 110;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 600; /* semibold */
  background: #202020;
}

.language-selector {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
}

.current-flag {
  width: 42px;
  height: 36px;
  cursor: pointer;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
}

.language-dropdown {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 9px;
  padding: 3px;
  display: none;
  flex-direction: column;
  gap: 5px;
}

.language-option {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px 0 3px;
  color: #ffa800;
  cursor: pointer;
  position: relative;
  border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}

.language-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.language-option .flag {
  width: 42px;
  height: 36px;
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.language-option.selected {
  color: white;
}

.language-option span {
  margin-left: 10px;
}

.language-option-en {
  background-image: url('images/flag-en.png');
}

.language-option-pl {
  background-image: url('images/flag-pl.png');
}

.language-option-cn {
  background-image: url('images/flag-cn.png');
}

.language-option-de {
  background-image: url('images/flag-de.png');
}

.language-option-es-419 {
  background-image: url('images/flag-es-419.png');
}

.language-option-es {
  background-image: url('images/flag-es.png');
}

.language-option-fr {
  background-image: url('images/flag-fr.png');
}

.language-option-jp {
  background-image: url('images/flag-jp.png');
}

.language-option-ko {
  background-image: url('images/flag-ko.png');
}

.language-option-pt-BR {
  background-image: url('images/flag-pt-BR.png');
}

.language-option-pt {
  background-image: url('images/flag-pt.png');
}

.language-option-ru {
  background-image: url('images/flag-ru.png');
}