diff --git a/src/index.html b/src/index.html
index 3741234..f4bee25 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
- Knative 2048 v2.0.3 - Auto-Promotion Fixed �
+ 2048 Game - v2.0.4
diff --git a/src/style.css b/src/style.css
index e017a87..a538006 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,15 +2,16 @@
html, body {
margin: 0;
- padding: 20px;
+ padding: 0;
background: #faf8ef;
color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px;
+ min-height: 100vh;
}
body {
- margin: 80px 0;
+ padding: 40px 20px;
}
.heading {
@@ -27,13 +28,16 @@ h1.title {
.container {
width: 512px;
margin: 0 auto;
+ padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 20px;
+ margin-bottom: 30px;
+ flex-wrap: wrap;
+ gap: 15px;
}
.header h1 {
@@ -41,6 +45,7 @@ h1.title {
font-size: 80px;
font-weight: bold;
margin: 0;
+ line-height: 1;
}
.environment-badge {
@@ -300,7 +305,7 @@ h1.title {
.game-explanation {
margin-top: 30px;
text-align: center;
- color: #776e65;
+ line-height: 1.6;
}
.game-explanation p {
@@ -380,3 +385,27 @@ h1.title {
font-size: 18px;
}
}
+
+/* Additional responsive improvements */
+@media screen and (max-width: 600px) {
+ body {
+ padding: 20px 10px;
+ }
+
+ .container {
+ width: 100%;
+ max-width: 480px;
+ padding: 10px;
+ }
+
+ .header h1 {
+ font-size: 60px;
+ }
+
+ .game-container {
+ width: 100%;
+ max-width: 480px;
+ height: auto;
+ aspect-ratio: 1;
+ }
+}