diff --git a/gameboard-easy.html b/gameboard-easy.html index 323a320..31868b1 100644 --- a/gameboard-easy.html +++ b/gameboard-easy.html @@ -19,9 +19,8 @@ body { align-items: center; padding: 8px 14px; background: rgba(255, 255, 255, 0.45); - border-bottom: 2px solid rgba(255, 255, 255, 0.6); + border-bottom: 2px solid rgba(39, 35, 35, 0.6); backdrop-filter: blur(14px); - position: sticky; top: 0; z-index: 50; @@ -51,7 +50,6 @@ body { backdrop-filter: blur(8px); color: #003366; font-weight: 600; - box-shadow: 0 3px 6px rgba(0,0,0,0.20), inset 0 0 6px rgba(255,255,255,0.6); @@ -61,18 +59,18 @@ body { font-size: 18px; } +/* GAMEBOARD & CARD */ .gameboard { display: grid; - grid-template-columns: repeat(4, 100px); /* 4 kolom */ - grid-template-rows: repeat(3, 120px); /* 3 baris */ + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 25px; justify-content: center; - gap: 15px; margin: 20px auto; } .card { - width: 120px; - height: 140px; + width: 140px; + height: 180px; perspective: 1000px; cursor: pointer; } @@ -102,7 +100,7 @@ body { } .front { - font-size: 45px; + font-size: 55px; font-weight: 700; color: #ff6a4d; } @@ -112,8 +110,8 @@ body { } .back img { - max-width: 75%; - max-height: 75%; + max-width: 85%; + max-height: 85%; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); } @@ -134,15 +132,25 @@ body { 0 0 30px rgba(122,255,214,0.8); } +/* RESPONSIVE */ @media (max-width: 600px) { .gameboard { - grid-template-columns: repeat(3, 90px); - gap: 14px; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + gap: 15px; } .card { - width: 90px; - height: 110px; + width: 100px; + height: 130px; + } + + .front { + font-size: 40px; + } + + .back img { + max-width: 80%; + max-height: 80%; } } @@ -151,7 +159,6 @@ body { ← - ⏱60s ⭐0 @@ -162,7 +169,6 @@ body {