diff --git a/src/index.html b/src/index.html
index 8675eb2..2730e60 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
- 2048 Game - v2.0.5
+ 2048 Game - v2.0.6
diff --git a/src/style.css b/src/style.css
index 54453c6..62ae057 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,9 @@
/* 2048 Game CSS - Knative Edition */
+* {
+ box-sizing: border-box;
+}
+
html, body {
margin: 0;
padding: 0;
@@ -11,7 +15,11 @@ html, body {
}
body {
- padding: 40px 20px;
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ min-height: 100vh;
}
.heading {
@@ -26,23 +34,25 @@ h1.title {
}
.container {
- width: 580px;
+ width: 100%;
+ max-width: 600px;
margin: 0 auto;
- padding: 20px;
+ padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 30px;
+ margin-bottom: 25px;
flex-wrap: wrap;
- gap: 15px;
+ gap: 10px;
+ padding: 0 15px;
}
.header h1 {
color: #776e65;
- font-size: 80px;
+ font-size: clamp(48px, 8vw, 80px);
font-weight: bold;
margin: 0;
line-height: 1;
@@ -111,13 +121,17 @@ h1.title {
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
+ padding: 0 15px;
+ flex-wrap: wrap;
+ gap: 15px;
}
.game-intro {
line-height: 1.65;
margin: 0;
flex: 1;
- margin-right: 20px;
+ margin-right: 15px;
+ font-size: clamp(14px, 2.5vw, 18px);
}
.restart-button {
@@ -146,8 +160,10 @@ h1.title {
touch-action: none;
background: #bbada0;
border-radius: 10px;
- width: 512px;
- height: 512px;
+ width: 100%;
+ max-width: 520px;
+ aspect-ratio: 1;
+ margin: 0 auto;
box-sizing: border-box;
}
@@ -303,13 +319,15 @@ h1.title {
}
.game-explanation {
- margin-top: 30px;
+ margin-top: 25px;
text-align: center;
line-height: 1.6;
+ padding: 0 15px;
+ font-size: clamp(14px, 2vw, 16px);
}
.game-explanation p {
- margin: 10px 0;
+ margin: 8px 0;
}
.keep-playing-button, .retry-button {
@@ -389,24 +407,79 @@ h1.title {
/* Additional responsive improvements */
@media screen and (max-width: 640px) {
body {
- padding: 20px 10px;
+ padding: 15px;
+ align-items: center;
}
.container {
- width: 100%;
- max-width: 520px;
- padding: 15px;
+ max-width: 100%;
+ }
+
+ .header {
+ padding: 0 10px;
+ margin-bottom: 20px;
}
.header h1 {
- font-size: 60px;
+ font-size: clamp(40px, 10vw, 60px);
+ }
+
+ .above-game {
+ padding: 0 10px;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 10px;
+ }
+
+ .game-intro {
+ margin-right: 0;
+ text-align: center;
+ font-size: 16px;
+ }
+
+ .restart-button {
+ align-self: center;
+ width: fit-content;
}
.game-container {
- width: 100%;
- max-width: 480px;
- height: auto;
- aspect-ratio: 1;
- margin: 0 auto;
+ max-width: 100%;
+ width: calc(100vw - 30px);
+ max-width: 450px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ body {
+ padding: 10px;
+ }
+
+ .header h1 {
+ font-size: clamp(32px, 12vw, 48px);
+ }
+
+ .game-container {
+ width: calc(100vw - 20px);
+ max-width: 400px;
+ padding: 10px;
+ }
+
+ .scores-container {
+ gap: 8px;
+ }
+
+ .score-container {
+ padding: 8px 12px;
+ min-width: 60px;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .container {
+ max-width: 650px;
+ }
+
+ .game-container {
+ max-width: 550px;
}
}