1:root {
2 --bg: #171522;
3 --panel: #27243a;
4 --panel-dark: #191727;
5 --ink: #f8eec7;
6 --muted: #b2a6cf;
7 --accent: #ffd166;
8 --good: #72ef9f;
9 --danger: #ef476f;
10 --tile: clamp(28px, 7.5vw, 54px);
11 --gap: 3px;
12}
13
14* { box-sizing: border-box; }
15
16body {
17 margin: 0;
18 min-height: 100vh;
19 display: grid;
20 place-items: center;
21 background:
22 radial-gradient(circle at 15% 20%, rgba(239, 71, 111, .20), transparent 28rem),
23 radial-gradient(circle at 85% 10%, rgba(17, 138, 178, .22), transparent 26rem),
24 linear-gradient(135deg, #11101a, var(--bg));
25 color: var(--ink);
26 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
27}
28
29.app {
30 width: min(96vw, 860px);
31 padding: 24px 0;
32}
33
34.hero {
35 display: flex;
36 justify-content: space-between;
37 align-items: end;
38 gap: 18px;
39 margin-bottom: 14px;
40}
41
42.eyebrow {
43 margin: 0 0 4px;
44 color: var(--accent);
45 font-size: .76rem;
46 text-transform: uppercase;
47 letter-spacing: .18em;
48}
49
50h1 {
51 margin: 0;
52 font-size: clamp(2rem, 7vw, 4.5rem);
53 line-height: .9;
54 text-shadow: 4px 4px 0 #0a0911, 7px 7px 0 rgba(239, 71, 111, .45);
55}
56
57.stats {
58 display: flex;
59 gap: 8px;
60 flex-wrap: wrap;
61 justify-content: flex-end;
62}
63
64.stats div {
65 min-width: 78px;
66 padding: 10px 12px;
67 text-align: center;
68 background: var(--panel);
69 border: 3px solid #45405f;
70 box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), 4px 4px 0 #0e0d16;
71}
72
73.stats span {
74 display: block;
75 font-size: 1.55rem;
76 color: white;
77}
78
79.stats small {
80 color: var(--muted);
81 text-transform: uppercase;
82 font-size: .68rem;
83}
84
85.panel {
86 position: relative;
87 padding: 16px;
88 background: linear-gradient(180deg, #302c45, var(--panel));
89 border: 4px solid #514b70;
90 box-shadow: 8px 8px 0 #0b0a12;
91}
92
93.level-strip {
94 display: flex;
95 gap: 8px;
96 margin-bottom: 16px;
97 overflow-x: auto;
98 padding-bottom: 4px;
99}
100
101.level-btn {
102 flex: 0 0 auto;
103 width: 42px;
104 height: 38px;
105 border: 3px solid #5b5578;
106 background: #1f1d2f;
107 color: var(--ink);
108 font: inherit;
109 cursor: pointer;
110 box-shadow: inset -3px -3px 0 rgba(0,0,0,.35);
111}
112
113.level-btn:hover,
114.level-btn.active { border-color: var(--accent); color: white; }
115.level-btn.done { background: #214536; border-color: var(--good); }
116.level-btn.done::after { content: "✓"; margin-left: 2px; color: var(--good); }
117
118.board-wrap {
119 position: relative;
120 display: grid;
121 place-items: center;
122 min-height: calc(var(--tile) * 8);
123 padding: 12px;
124 background: var(--panel-dark);
125 border: 4px solid #151320;
126 overflow: auto;
127}
128
129.board {
130 display: grid;
131 grid-template-columns: repeat(var(--cols), var(--tile));
132 grid-template-rows: repeat(var(--rows), var(--tile));
133 gap: var(--gap);
134 padding: var(--gap);
135 background: #0d0c14;
136 image-rendering: pixelated;
137}
138
139.tile {
140 position: relative;
141 width: var(--tile);
142 height: var(--tile);
143 background: #3b3651;
144 box-shadow: inset 0 0 0 2px rgba(255,255,255,.04), inset -5px -5px 0 rgba(0,0,0,.18);
145}
146
147.tile.floor {
148 background:
149 linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25% 75%, rgba(0,0,0,.06) 75%),
150 #3b3651;
151 background-size: 12px 12px;
152}
153
154.tile.wall {
155 background:
156 linear-gradient(#716787 0 18%, transparent 18% 22%, #4c4867 22% 48%, transparent 48% 52%, #635b7b 52% 78%, transparent 78%),
157 repeating-linear-gradient(90deg, transparent 0 46%, rgba(0,0,0,.22) 46% 52%, transparent 52% 100%),
158 #5a536f;
159 border: 2px solid #83799b;
160 box-shadow: inset -7px -7px 0 rgba(0,0,0,.28), inset 5px 5px 0 rgba(255,255,255,.12);
161}
162
163.tile.goal::after {
164 content: "";
165 position: absolute;
166 inset: 28%;
167 border: 4px solid var(--accent);
168 border-radius: 50%;
169 background: radial-gradient(circle, rgba(255,209,102,.9) 0 18%, transparent 20%);
170 filter: drop-shadow(0 0 5px rgba(255,209,102,.55));
171}
172
173.tile.box::before {
174 content: "";
175 position: absolute;
176 z-index: 2;
177 inset: 10%;
178 background:
179 linear-gradient(45deg, transparent 44%, rgba(85,45,16,.34) 45% 55%, transparent 56%),
180 linear-gradient(-45deg, transparent 44%, rgba(85,45,16,.34) 45% 55%, transparent 56%),
181 #b97835;
182 border: 3px solid #ffd08a;
183 box-shadow: inset -7px -7px 0 rgba(89,42,13,.42), inset 4px 4px 0 rgba(255,255,255,.18), 0 5px 0 rgba(0,0,0,.22);
184}
185
186.tile.box.goal::before {
187 background:
188 linear-gradient(45deg, transparent 44%, rgba(21,84,48,.34) 45% 55%, transparent 56%),
189 linear-gradient(-45deg, transparent 44%, rgba(21,84,48,.34) 45% 55%, transparent 56%),
190 #58c47d;
191 border-color: #c9ffd8;
192}
193
194.tile.player::before {
195 content: "";
196 position: absolute;
197 z-index: 3;
198 left: 19%;
199 right: 19%;
200 top: 10%;
201 bottom: 12%;
202 border-radius: 45% 45% 35% 35%;
203 background:
204 radial-gradient(circle at 36% 34%, #161421 0 5%, transparent 6%),
205 radial-gradient(circle at 64% 34%, #161421 0 5%, transparent 6%),
206 linear-gradient(#ffef99 0 40%, #118ab2 40% 100%);
207 border: 3px solid #fff1ad;
208 box-shadow: inset -5px -5px 0 rgba(0,0,0,.22), 0 5px 0 rgba(0,0,0,.24);
209}
210
211.tile.player::after {
212 content: "";
213 position: absolute;
214 z-index: 4;
215 left: 35%;
216 right: 35%;
217 top: 45%;
218 height: 4px;
219 background: #161421;
220}
221
222.overlay {
223 position: absolute;
224 inset: 12px;
225 display: grid;
226 place-items: center;
227 background: rgba(13, 12, 20, .72);
228 opacity: 0;
229 pointer-events: none;
230 transform: scale(.98);
231 transition: opacity .18s ease, transform .18s ease;
232}
233
234.overlay.show {
235 opacity: 1;
236 transform: scale(1);
237}
238
239.overlay-card {
240 padding: 24px 30px;
241 text-align: center;
242 background: #211f32;
243 border: 4px solid var(--accent);
244 box-shadow: 7px 7px 0 #0a0911;
245}
246
247.overlay-card strong { display: block; font-size: 1.6rem; color: white; }
248.overlay-card span { display: block; margin-top: 8px; color: var(--muted); }
249
250.controls {
251 display: flex;
252 flex-wrap: wrap;
253 gap: 10px 18px;
254 justify-content: center;
255 margin-top: 14px;
256 color: var(--muted);
257 font-size: .95rem;
258}
259
260kbd {
261 display: inline-block;
262 min-width: 1.7em;
263 margin: 0 2px;
264 padding: 2px 6px;
265 color: var(--ink);
266 background: #151320;
267 border: 2px solid #4c4867;
268 box-shadow: inset -2px -2px 0 rgba(0,0,0,.4);
269}
270
271@media (max-width: 620px) {
272 .hero { align-items: stretch; flex-direction: column; }
273 .stats { justify-content: flex-start; }
274 .panel { padding: 10px; }
275 .board-wrap { padding: 8px; }
276 .overlay { inset: 8px; }
277}
278
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.