feat: adjust game life component in screen to be responsible

Author: Murillo

src/library/pages/css/styles.css

@@ -227,45 +227,69 @@ ul li a:hover {
 }
 
 #main {
-	height: 100%;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	padding: 0;
+	box-sizing: border-box;
 }
 #menu{
-	width: 650px;
-	height: 50px;
+	width: 100%;
+	min-height: 50px;
 	position: absolute;
-    background: transparent;
-	right: 0px;
+	background: transparent;
+	left: 0;
+	right: 0;
+	margin: 0;
 	bottom: 0px;
 	color: white;
 	font-family: Guardians;
+	display: flex;
+	align-items: stretch;
+	justify-content: center;
+	gap: 0;
+}
+
+#gameContainer {
+	width: 100%;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #191644;
+}
+
+#game {
+	flex: 1;
 }
 
 #menu .left-menu {
 	width: 0;
 	height: 0;
-	border-top: 50px solid transparent;
-	border-right: 30px solid #222222;
+	border-top: 0px solid transparent;
+	border-right: 0px solid #222222;
 	border-bottom: 0px solid transparent;
 	float: left;
 }
 #menu .center-menu{
 	background: #222222;
-	width: 620px;
-	height: 50px;
-	float: left;
+	flex: 1;
+	min-height: 50px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0 12px;
 }
 #menu .center-menu .text{
-	width: 80px;
-	float: left;
-	margin: 15px 5px;
+	min-width: 60px;
+	margin: 0;
 }
 #menu .center-menu .result{
-	width: 180px;
-	float: left;
-	margin: 15px 5px;
+	min-width: 120px;
+	margin: 0;
 }
 #menu .center-menu .value{
-	width: 60px;
+	min-width: 60px;
 }
 #menu .center-menu progress{
 	width: 80%;
@@ -279,6 +303,68 @@ ul li a:hover {
 
 }
 
+@media (max-width: 768px) {
+	#main {
+		padding: 0 12px 90px 12px;
+	}
+
+	#menu {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		flex-direction: column;
+		align-items: stretch;
+		margin: 0;
+		max-width: none;
+		z-index: 900;
+		padding: 0 12px 12px 12px;
+	}
+
+	#menu .left-menu,
+	#menu .right-menu {
+		display: none;
+	}
+
+	#menu .center-menu {
+		border-radius: 6px;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		align-items: center;
+		gap: 8px 12px;
+		padding: 8px 12px;
+	}
+
+	#menu .center-menu .text,
+	#menu .center-menu .result,
+	#menu .center-menu .value {
+		flex: initial;
+	}
+
+	#menu .center-menu progress {
+		width: 100%;
+	}
+}
+
+@media (max-width: 480px) {
+	#main {
+		padding: 0 8px 100px 8px;
+	}
+
+	#menu .center-menu {
+		gap: 6px;
+		row-gap: 6px;
+		grid-template-columns: auto 1fr;
+	}
+
+	#menu .center-menu .text,
+	#menu .center-menu .result,
+	#menu .center-menu .value {
+		flex: initial;
+		text-align: left;
+	}
+}
+
 /* Modal */
 #modal{
 	display: none;
@@ -320,4 +406,4 @@ ul li a:hover {
     width: 100% !important;
     height: calc(100vh - 50px) !important;
 	filter: brightness(75%);
-}
+}