src/style.css 3.8 K raw
1
* {
2
  margin: 0;
3
  padding: 0;
4
  box-sizing: border-box;
5
}
6
7
html,
8
body {
9
  height: 100%;
10
  overflow: hidden;
11
  touch-action: none;
12
}
13
14
body {
15
  background-color: #121113;
16
  display: flex;
17
  flex-direction: column;
18
  align-items: center;
19
  justify-content: center;
20
}
21
22
#game-container {
23
  width: 100%;
24
  max-width: 600px;
25
  padding: 0 16px;
26
  display: flex;
27
  justify-content: center;
28
  position: relative;
29
}
30
31
#game-container canvas {
32
  width: 100%;
33
  aspect-ratio: 4 / 1;
34
  display: block;
35
  image-rendering: pixelated;
36
  image-rendering: crisp-edges;
37
}
38
39
#score-overlay {
40
  position: absolute;
41
  inset: 0;
42
  display: flex;
43
  align-items: center;
44
  justify-content: center;
45
  background: rgba(18, 17, 19, 0.88);
46
  z-index: 10;
47
}
48
49
#score-modal {
50
  display: flex;
51
  flex-direction: column;
52
  align-items: center;
53
  gap: 16px;
54
  background: #1a1a1b;
55
  border: 2px solid #3a3a3b;
56
  border-radius: 4px;
57
  padding: 32px;
58
  font-family: 'PressStart2P', monospace;
59
  color: #e8e8e8;
60
  text-align: center;
61
  min-width: 400px;
62
  max-width: 90vw;
63
}
64
65
@media (max-width: 500px) {
66
  #score-modal {
67
    min-width: auto;
68
    width: 90vw;
69
  }
70
}
71
72
/* Ensure modal is visible above mobile keyboard */
73
@media (max-height: 600px) {
74
  #score-modal {
75
    max-height: 90vh;
76
    overflow-y: auto;
77
    padding: 20px;
78
    gap: 12px;
79
  }
80
}
81
82
#score-modal h2 {
83
  font-size: 14px;
84
  margin-bottom: 8px;
85
  letter-spacing: 1px;
86
}
87
88
#final-score-display {
89
  font-size: 12px;
90
  color: #a8a8a8;
91
}
92
93
#submit-section {
94
  display: flex;
95
  flex-direction: column;
96
  align-items: center;
97
  gap: 12px;
98
}
99
100
#player-initials {
101
  width: 100px;
102
  padding: 12px 8px;
103
  font-family: 'PressStart2P', monospace;
104
  font-size: 16px;
105
  background: #121113;
106
  border: 2px solid #3a3a3b;
107
  border-radius: 2px;
108
  color: #e8e8e8;
109
  text-transform: uppercase;
110
  text-align: center;
111
  letter-spacing: 4px;
112
  outline: none;
113
}
114
115
#player-initials:focus {
116
  border-color: #5a5a5b;
117
}
118
119
#player-initials::placeholder {
120
  color: #5a5a5b;
121
  letter-spacing: 4px;
122
}
123
124
#submit-btn,
125
#action-btn {
126
  width: 100%;
127
  max-width: 200px;
128
  padding: 12px 16px;
129
  font-family: 'PressStart2P', monospace;
130
  font-size: 10px;
131
  background: #2a2a2b;
132
  border: 2px solid #4a4a4b;
133
  border-radius: 2px;
134
  color: #e8e8e8;
135
  cursor: pointer;
136
  transition: background 0.15s, border-color 0.15s;
137
}
138
139
#submit-btn:hover:not(:disabled),
140
#action-btn:hover {
141
  background: #3a3a3b;
142
  border-color: #5a5a5b;
143
}
144
145
#submit-btn:disabled {
146
  opacity: 0.5;
147
  cursor: not-allowed;
148
}
149
150
.leaderboard-table {
151
  width: 100%;
152
  border-collapse: collapse;
153
  font-size: 10px;
154
}
155
156
.leaderboard-table th {
157
  padding: 8px 4px;
158
  border-bottom: 1px solid #3a3a3b;
159
  color: #a8a8a8;
160
}
161
162
.leaderboard-table td {
163
  padding: 8px 4px;
164
}
165
166
.leaderboard-table tbody tr:hover {
167
  background: #252526;
168
}
169
170
.leaderboard-table tbody tr.highlight {
171
  background: #2a3a2a;
172
  color: #7fc97f;
173
}
174
175
.loading,
176
.empty,
177
.error {
178
  font-size: 10px;
179
  color: #a8a8a8;
180
  padding: 20px;
181
}
182
183
.error {
184
  color: #e85a5a;
185
}
186
187
#cheatsheet {
188
  display: flex;
189
  flex-direction: column;
190
  justify-content: center;
191
  gap: 24px;
192
  padding: 12px 16px;
193
  font-family: 'PressStart2P', monospace;
194
  font-size: 8px;
195
  color: #4a4a4b;
196
  letter-spacing: 0.5px;
197
  padding-top: 24px;
198
  opacity: 1;
199
  transition: opacity 0.6s ease;
200
}
201
202
#cheatsheet.hidden {
203
  opacity: 0;
204
}
205
206
#touch-zones {
207
  display: none;
208
  position: fixed;
209
  bottom: 0;
210
  left: 0;
211
  right: 0;
212
  top: 60%;
213
  gap: 1px;
214
  opacity: 1;
215
  transition: opacity 0.6s ease;
216
}
217
218
#touch-zones.hidden {
219
  opacity: 0;
220
}
221
222
#touch-zones > div {
223
  flex: 1;
224
  display: flex;
225
  align-items: center;
226
  justify-content: center;
227
  border: 2px solid #3a3a3b;
228
  border-radius: 4px;
229
  font-family: 'PressStart2P', monospace;
230
  font-size: 10px;
231
  color: #4a4a4b;
232
  user-select: none;
233
  -webkit-user-select: none;
234
}
235
236
@media (pointer: coarse) {
237
  #cheatsheet {
238
    display: none;
239
  }
240
241
  #touch-zones {
242
    display: flex;
243
  }
244
}