Homepage Credit and Responsive

Homepage.css

@@ -13,6 +13,11 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  max-width: 100vw;
 }
 
 /* Animated Background Grid */
@@ -195,8 +200,15 @@ header {
   z-index: 10;
   text-align: center;
   padding: 140px 20px 120px;
-  max-width: 1100px;
+  max-width: 100%;
+  width: 100%;
   margin: 0 auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 70vh;
+  overflow: hidden;
 }
 
 .hero-title {

Homepage.html

@@ -12,6 +12,8 @@
   <!-- Neon Particles Background -->
   <div id="particles"></div>
 
+  <!-- Main Content Wrapper -->
+  <div class="main-content">
     <!-- Header -->
     <header>
       <div class="logo">2048</div>
@@ -29,9 +31,7 @@
         <a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
       </div>
     </section>
-
-  <!-- Spacer -->
-  <br><br><br>
+  </div>
 
   <!-- Footer with Credits -->
   <footer>

Homepage_Credit.css

@@ -1,40 +1,23 @@
-/* Body Setup - Flexbox untuk push footer ke bawah */
-body {
-  min-height: 100vh;
+/* Main Content Wrapper - Takes all space except footer */
+.main-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  padding-bottom: 0;
-  margin: 0;
+  position: relative;
+  z-index: 10;
 }
 
-/* Main Content Area - Flex Grow untuk isi space */
-header,
-.hero,
-section:not(footer) {
-  flex-shrink: 0; /* prevent shrinking */
-}
-
-/* Spacer juga perlu flex-grow supaya push footer */
-br {
-  display: block;
-}
-
-/* Wrapper untuk semua konten sebelum footer */
-body > *:not(footer):not(script):not(#particles):not(.logout-overlay):not(.logout-success-overlay) {
-  flex-shrink: 0;
-}
-
-/* Footer Section - Relative & Auto Push to Bottom */
+/* Footer Section - Always at bottom */
 footer {
   position: relative;
-  margin-top: auto; /* push footer ke bawah */
   z-index: 10;
   text-align: center;
-  padding: 20px 20px;
+  padding: 20px;
   background: transparent;
+  margin-top: 0;
 }
 
-/* HR Line Above Credits - Simple Single Line */
+/* HR Line Above Credits */
 .footer-hr {
   width: 50%;
   max-width: 500px;
@@ -44,7 +27,7 @@ footer {
   border: none;
 }
 
-/* Credits Container - No Box, Just Text */
+/* Credits Container */
 .credits {
   max-width: 100%;
   margin: 0 auto;
@@ -53,7 +36,7 @@ footer {
   border: none;
 }
 
-/* Simple Credit Text - Small & Clean */
+/* Credit Text */
 .credits-text {
   color: rgba(255, 255, 255, 0.5);
   font-size: 12px;
@@ -68,23 +51,12 @@ footer {
   font-weight: 500;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-  footer {
-    padding: 15px 15px;
-  }
-  
-  .footer-hr {
-    width: 60%;
-    margin-bottom: 10px;
-  }
-  
-  .credits-text {
-    font-size: 11px;
-  }
-}
-
+/* Responsive - HP Only */
 @media (max-width: 480px) {
+  .main-content {
+    min-height: calc(100vh - 80px);
+  }
+
   footer {
     padding: 12px 10px;
   }
@@ -95,7 +67,11 @@ footer {
   }
   
   .credits-text {
-    font-size: 10px;
-    line-height: 1.4;
+    font-size: 9px;
+    line-height: 1.6;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 5px;
   }
 }