From 4a84e48b30c3f7e3bda534ee1e0ed2bd4105f8eb Mon Sep 17 00:00:00 2001
From: Nathan <nathan-h.inf25@ukwms.ac.id>
Date: Thu, 18 Dec 2025 03:12:17 +0700
Subject: [PATCH] endscreen ilang

---
 assets/gameboard-hard.css | 51 ++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/assets/gameboard-hard.css b/assets/gameboard-hard.css
index 52b133a..740ff17 100644
--- a/assets/gameboard-hard.css
+++ b/assets/gameboard-hard.css
@@ -1,7 +1,7 @@
 html, body {
   margin: 0;
   height: 100vh;
-  overflow: hidden; /* Layar dikunci, tidak bisa scroll */
+  overflow: hidden; /* Wajib: Kunci layar biar gak bisa discroll */
   font-family: "Poppins", sans-serif;
 }
 
@@ -14,7 +14,7 @@ body {
 /* --- TOPBAR --- */
 .topbar {
   width: 100%;
-  height: 60px; /* Tinggi fix */
+  height: 60px; /* Tinggi header kita kunci */
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
@@ -23,7 +23,7 @@ body {
   background: rgba(255, 255, 255, 0.9);
   border-bottom: 2px solid rgba(0,0,0,0.1);
   z-index: 50;
-  flex-shrink: 0;
+  flex-shrink: 0; 
 }
 
 .back-btn { font-size: 26px; border: none; background: none; cursor: pointer; color: #222; }
@@ -35,20 +35,22 @@ body {
 }
 .icon { font-size: 18px; }
 
-/* --- GAMEBOARD (FULL SCREEN) --- */
+/* --- GAMEBOARD FULL SCREEN --- */
 .gameboard {
-  /* Memenuhi sisa tinggi layar */
+  /* 1. Ambil SEMUA sisa tinggi layar (100% layar - 60px header) */
   height: calc(100vh - 60px);
-  /* Memenuhi seluruh lebar layar */
+  
+  /* 2. Ambil SEMUA lebar layar */
   width: 100%;
-  max-width: none; 
+  max-width: none; /* Hapus batasan lebar yang bikin kecil kemarin */
   
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* 4 Kolom */
-  grid-template-rows: repeat(5, 1fr);    /* 5 Baris */
+  /* Grid 4 Kolom x 5 Baris */
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 1fr);
   
-  gap: 10px;
-  padding: 10px;
+  gap: 10px; /* Jarak antar kartu sedikit dilonggarkan */
+  padding: 10px; /* Jarak dari pinggir layar */
   box-sizing: border-box;
 }
 
@@ -58,6 +60,7 @@ body {
   height: 100%;
   perspective: 1000px;
   cursor: pointer;
+  /* PENTING: min-height 0 supaya kartu mau mengecil/memipih menyesuaikan grid */
   min-height: 0;
   min-width: 0;
 }
@@ -68,10 +71,9 @@ body {
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.4s;
-  border-radius: 12px;
+  border-radius: 10px;
 }
 
-/* Settingan Umum Depan & Belakang */
 .front, .back {
   position: absolute;
   width: 100%;
@@ -80,45 +82,38 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 12px;
-  /* Border putih transparan biar cantik */
-  border: 2px solid rgba(255,255,255,0.5); 
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  border-radius: 10px;
+  border: 2px solid rgba(255,255,255,0.6);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
 }
 
-/* --- BAGIAN DEPAN (Tanda Tanya) --- */
 .front {
   background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%);
   color: #ff6a4d;
+  /* Font ? dibuat besar tapi responsif */
   font-size: 5vh; 
   font-weight: 800;
 }
 
-/* --- BAGIAN BELAKANG (Gambar) --- */
 .back {
-  /* INI PERUBAHANNYA: Background dibuat gradient juga, bukan putih lagi */
-  background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%);
+  background: white;
   transform: rotateY(180deg);
 }
 
-/* Gambar di dalam kartu */
+/* Agar gambar di dalam kartu tetap proporsional (tidak gepeng) */
 .back img {
   width: 70%; 
   height: 70%;
   object-fit: contain; 
-  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); /* Efek bayangan pada buah */
 }
 
-/* Efek Balik */
 .card.flipped .inner { transform: rotateY(180deg); }
-
-/* Efek Cocok (Matched) - Bersinar Hijau */
 .card.matched .front, .card.matched .back {
   border-color: #7affd6;
-  box-shadow: 0 0 15px #7affd6, inset 0 0 10px rgba(122, 255, 214, 0.5);
+  box-shadow: 0 0 15px #7affd6;
 }
 
-/* --- LAINNYA --- */
+/* --- ELEMENTS LAINNYA --- */
 #countdown-overlay {
   position: fixed; top: 0; left: 0; width: 100%; height: 100%;
   background: rgba(0,0,0,0.85); display: none;