Pp commited on
Commit
b419bd3
·
verified ·
1 Parent(s): 8f46fae

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +26 -19
style.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Layout & Base */
2
  body {
3
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
4
  margin: 0;
@@ -12,15 +12,14 @@ body {
12
  color: #333;
13
  }
14
 
15
- /* Title */
16
  h1 {
17
- font-size: 28px;
18
- margin: 20px 0;
19
  color: #222;
20
  text-align: center;
21
  }
22
 
23
- /* Game Container */
24
  .game-container {
25
  border: 1px solid #e0e0e0;
26
  border-radius: 16px;
@@ -28,12 +27,12 @@ h1 {
28
  background-color: #fff;
29
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
30
  width: 100%;
31
- max-width: 800px;
32
  }
33
 
34
- /* Control Buttons */
35
  .controls {
36
- margin: 20px 0;
37
  display: flex;
38
  justify-content: center;
39
  gap: 12px;
@@ -63,10 +62,18 @@ button:hover {
63
  color: #007aff;
64
  }
65
 
66
- /* Grid Wrapper + Grid */
 
 
 
 
 
 
 
 
 
67
  .grid-wrapper {
68
- width: 100%;
69
- max-width: 700px;
70
  aspect-ratio: 1 / 1;
71
  background-color: #f0f0f0;
72
  border: 2px solid #d0d0d0;
@@ -78,6 +85,7 @@ button:hover {
78
  justify-content: stretch;
79
  }
80
 
 
81
  .grid {
82
  flex: 1;
83
  display: grid;
@@ -88,7 +96,7 @@ button:hover {
88
  border-radius: 8px;
89
  }
90
 
91
- /* Grid Cells */
92
  .cell {
93
  width: 100%;
94
  height: 100%;
@@ -107,22 +115,21 @@ button:hover {
107
  border: 1px solid #005bb5;
108
  }
109
 
110
- /* Stats Display */
111
  .stats {
112
- margin-top: 20px;
113
- font-size: 16px;
114
  display: flex;
 
 
 
115
  justify-content: center;
116
- gap: 20px;
117
- flex-wrap: wrap;
118
  }
119
 
120
  .stat-box {
121
  background-color: #f2f2f2;
122
- padding: 10px 16px;
123
  border-radius: 8px;
124
  border: 1px solid #ddd;
125
- min-width: 140px;
126
  }
127
 
128
  .stat-value {
 
1
+ /* Base layout */
2
  body {
3
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
4
  margin: 0;
 
12
  color: #333;
13
  }
14
 
 
15
  h1 {
16
+ font-size: 26px;
17
+ margin: 16px 0;
18
  color: #222;
19
  text-align: center;
20
  }
21
 
22
+ /* Main container */
23
  .game-container {
24
  border: 1px solid #e0e0e0;
25
  border-radius: 16px;
 
27
  background-color: #fff;
28
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
29
  width: 100%;
30
+ max-width: 880px;
31
  }
32
 
33
+ /* Controls */
34
  .controls {
35
+ margin: 16px 0;
36
  display: flex;
37
  justify-content: center;
38
  gap: 12px;
 
62
  color: #007aff;
63
  }
64
 
65
+ /* Layout: grid + stats side by side */
66
+ .grid-and-stats {
67
+ display: flex;
68
+ gap: 20px;
69
+ justify-content: center;
70
+ align-items: flex-start;
71
+ flex-wrap: wrap;
72
+ }
73
+
74
+ /* Grid wrapper */
75
  .grid-wrapper {
76
+ width: 420px;
 
77
  aspect-ratio: 1 / 1;
78
  background-color: #f0f0f0;
79
  border: 2px solid #d0d0d0;
 
85
  justify-content: stretch;
86
  }
87
 
88
+ /* Grid */
89
  .grid {
90
  flex: 1;
91
  display: grid;
 
96
  border-radius: 8px;
97
  }
98
 
99
+ /* Cells */
100
  .cell {
101
  width: 100%;
102
  height: 100%;
 
115
  border: 1px solid #005bb5;
116
  }
117
 
118
+ /* Stats on the right */
119
  .stats {
 
 
120
  display: flex;
121
+ flex-direction: column;
122
+ gap: 14px;
123
+ font-size: 16px;
124
  justify-content: center;
125
+ min-width: 160px;
 
126
  }
127
 
128
  .stat-box {
129
  background-color: #f2f2f2;
130
+ padding: 12px 16px;
131
  border-radius: 8px;
132
  border: 1px solid #ddd;
 
133
  }
134
 
135
  .stat-value {