diff --git a/gameboard-easy.html b/gameboard-easy.html
index 2c1b0de..511acb6 100644
--- a/gameboard-easy.html
+++ b/gameboard-easy.html
@@ -198,14 +198,50 @@ body {
font-weight: 600;
}
+.gameboard {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 16px;
+ padding: 25px 40px;
+ box-sizing: border-box;
+ place-items: center;
+}
+
+.card {
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ perspective: 1000px;
+ cursor: pointer;
+}
+
+
+
.play-again { background: #b700ff; color: white; }
.leaderboard { background: gold; }
-.back-menu { background: #444; color: white; } /* ← DITAMBAHKAN */
+.back-menu { background: #444; color: white; }
@keyframes fadeIn {
from { opacity:0; transform: scale(0.8); }
to { opacity:1; transform: scale(1); }
}
+
+@media (max-width: 900px) {
+ .gameboard {
+ grid-template-columns: repeat(3, 1fr);
+ padding: 20px;
+ gap: 12px;
+ }
+}
+
+@media (max-width: 600px) {
+ .gameboard {
+ grid-template-columns: repeat(2, 1fr);
+ padding: 14px;
+ gap: 10px;
+ }
+}
+
diff --git a/gameboard-medium.html b/gameboard-medium.html
index ef3b259..7d94060 100644
--- a/gameboard-medium.html
+++ b/gameboard-medium.html
@@ -200,10 +200,42 @@ body {
font-weight: 600;
}
+.gameboard {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 16px;
+ padding: 25px 40px;
+ box-sizing: border-box;
+ place-items: center;
+}
+
+.card {
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ perspective: 1000px;
+ cursor: pointer;
+}
+
.play-again { background: #b700ff; color: white; }
.leaderboard { background: gold; }
.back-menu { background: #444; color: white; }
+@media (max-width: 900px) {
+ .gameboard {
+ grid-template-columns: repeat(3, 1fr);
+ padding: 20px;
+ gap: 12px;
+ }
+}
+
+@media (max-width: 600px) {
+ .gameboard {
+ grid-template-columns: repeat(2, 1fr);
+ padding: 14px;
+ gap: 10px;
+ }
+}