diff --git a/gameboard-easy.html b/gameboard-easy.html index 974a92e..323a320 100644 --- a/gameboard-easy.html +++ b/gameboard-easy.html @@ -18,7 +18,6 @@ body { justify-content: space-between; align-items: center; padding: 8px 14px; - background: rgba(255, 255, 255, 0.45); border-bottom: 2px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(14px); @@ -55,20 +54,20 @@ body { box-shadow: 0 3px 6px rgba(0,0,0,0.20), - inset 0 0 6px rgba(255,255,255,0.6); + inset 0 0 6px rgba(255,255,255,0.6); } .icon { font-size: 18px; } - .gameboard { display: grid; - grid-template-columns: repeat(5, 120px); - gap: 18px; + grid-template-columns: repeat(4, 100px); /* 4 kolom */ + grid-template-rows: repeat(3, 120px); /* 3 baris */ justify-content: center; - margin: 30px auto; + gap: 15px; + margin: 20px auto; } .card { @@ -118,18 +117,15 @@ body { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); } -/* HOVER EFFECT */ .card:not(.flipped):hover .front { transform: scale(1.05); transition: 0.25s; } -/* FLIP ANIMATION */ .card.flipped .inner { transform: rotateY(180deg); } -/* MATCHED GLOW */ .card.matched .front, .card.matched .back { border-color: #7affd6; @@ -140,7 +136,7 @@ body { @media (max-width: 600px) { .gameboard { - grid-template-columns: repeat(4, 90px); + grid-template-columns: repeat(3, 90px); gap: 14px; } @@ -153,9 +149,8 @@ body { -