Spaces:
Running
Running
Update style.css
Browse files
style.css
CHANGED
@@ -1,4 +1,4 @@
|
|
1 |
-
/*
|
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:
|
18 |
-
margin:
|
19 |
color: #222;
|
20 |
text-align: center;
|
21 |
}
|
22 |
|
23 |
-
/*
|
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:
|
32 |
}
|
33 |
|
34 |
-
/*
|
35 |
.controls {
|
36 |
-
margin:
|
37 |
display: flex;
|
38 |
justify-content: center;
|
39 |
gap: 12px;
|
@@ -63,10 +62,18 @@ button:hover {
|
|
63 |
color: #007aff;
|
64 |
}
|
65 |
|
66 |
-
/*
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
67 |
.grid-wrapper {
|
68 |
-
width:
|
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 |
-
/*
|
92 |
.cell {
|
93 |
width: 100%;
|
94 |
height: 100%;
|
@@ -107,22 +115,21 @@ button:hover {
|
|
107 |
border: 1px solid #005bb5;
|
108 |
}
|
109 |
|
110 |
-
/* Stats
|
111 |
.stats {
|
112 |
-
margin-top: 20px;
|
113 |
-
font-size: 16px;
|
114 |
display: flex;
|
|
|
|
|
|
|
115 |
justify-content: center;
|
116 |
-
|
117 |
-
flex-wrap: wrap;
|
118 |
}
|
119 |
|
120 |
.stat-box {
|
121 |
background-color: #f2f2f2;
|
122 |
-
padding:
|
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 {
|