fuzzyworld

nuts / lava / files / src / style.css

Branch lava · default branch · all branches

style.css

Blame: the commit that last changed each line · file · history

44eb5832 2026-04-12 Pavel Safronov1*,
2*::before,
3*::after {
4 box-sizing: border-box;
5 margin: 0;
6 padding: 0;
7}
8
9html,
10body {
11 width: 100%;
12 height: 100%;
13 overflow: hidden;
14 background: #111;
15 touch-action: none;
16 -webkit-tap-highlight-color: transparent;
17 user-select: none;
18 -webkit-user-select: none;
19}
20
21#canvas {
22 display: block;
23 position: fixed;
24 inset: 0;
25 width: 100%;
26 height: 100%;
27}
28
29/* ── Start overlay ─────────────────────────────────────────── */
30#start-overlay {
31 position: fixed;
32 inset: 0;
33 background: #111;
34 display: flex;
35 align-items: center;
36 justify-content: center;
37 z-index: 100;
38 cursor: pointer;
39}
40
f1262fd9 2026-04-12 Pavel Safronov41#fullscreen-overlay {
42 position: fixed;
43 inset: 0;
44 background: #111;
45 display: flex;
46 align-items: center;
47 justify-content: center;
48 z-index: 200;
49 cursor: pointer;
50}
51
52#fullscreen-overlay[hidden] {
53 display: none;
54}
55
44eb5832 2026-04-12 Pavel Safronov56.start-content {
57 display: flex;
58 flex-direction: column;
59 align-items: center;
60 gap: 12px;
61 color: #e0e0e0;
62}
63
64.nut-icon {
8d4a3ae4 2026-04-12 Pavel Safronov65 width: 80px;
66 height: 80px;
67 padding: 20px;
68 background: #c8a84b;
69 border-radius: 28px;
70 box-shadow: 0 0 40px rgba(200, 168, 75, 0.55), 0 0 80px rgba(200, 168, 75, 0.25);
44eb5832 2026-04-12 Pavel Safronov71 animation: bob 2.4s ease-in-out infinite;
72}
73
74@keyframes bob {
75
76 0%,
77 100% {
78 transform: translateY(0) rotate(0deg);
79 }
80
81 50% {
82 transform: translateY(-12px) rotate(15deg);
83 }
84}
85
86.start-content h1 {
87 font-family: system-ui, -apple-system, sans-serif;
88 font-size: 36px;
89 font-weight: 700;
90 letter-spacing: 0.08em;
91 color: #c8a84b;
92 text-transform: uppercase;
93}
94
95.start-content p {
96 font-family: system-ui, -apple-system, sans-serif;
97 font-size: 16px;
98 color: #666;
99 letter-spacing: 0.12em;
100 text-transform: uppercase;
101}
102
48f320c1 2026-04-12 Pavel Safronov103/* ── Toolbar ─────────────────────────────────────────────────── */
104#toolbar {
44eb5832 2026-04-12 Pavel Safronov105 position: fixed;
48f320c1 2026-04-12 Pavel Safronov106 top: max(10px, env(safe-area-inset-top, 10px));
107 left: 50%;
108 transform: translateX(-50%);
109 display: none;
110 gap: 8px;
111 z-index: 50;
112 padding: 6px 10px;
113 background: rgba(20, 20, 20, 0.72);
114 border-radius: 99px;
115 backdrop-filter: blur(12px);
116 -webkit-backdrop-filter: blur(12px);
117 border: 1px solid rgba(255, 255, 255, 0.08);
118 pointer-events: none;
119 /* container doesn't intercept — buttons do */
120}
121
122#toolbar:not([hidden]) {
123 display: flex;
124}
125
126.toolbar-btn {
127 width: 40px;
128 height: 40px;
44eb5832 2026-04-12 Pavel Safronov129 border-radius: 50%;
130 border: none;
48f320c1 2026-04-12 Pavel Safronov131 background: transparent;
132 color: #bbb;
133 font-size: 18px;
44eb5832 2026-04-12 Pavel Safronov134 cursor: pointer;
135 display: flex;
136 align-items: center;
137 justify-content: center;
48f320c1 2026-04-12 Pavel Safronov138 transition: background 0.15s, color 0.15s;
139 flex-shrink: 0;
140 pointer-events: auto;
141 /* re-enable on each button */
142 -webkit-tap-highlight-color: transparent;
143}
144
145.toolbar-btn:active {
146 background: rgba(255, 255, 255, 0.15);
147}
148
149.toolbar-btn.active {
150 color: #8fce8f;
151 background: rgba(143, 206, 143, 0.15);
152}
153
154.toolbar-btn.kind-nut {
155 color: #c8a84b;
44eb5832 2026-04-12 Pavel Safronov156}
157
48f320c1 2026-04-12 Pavel Safronov158.toolbar-btn.kind-gem {
159 color: #80A8FF;
160}
161
162.toolbar-btn.kind-balloon {
163 color: #FF4466;
164}
165
a2b3b1f4 2026-04-12 Pavel Safronov166.toolbar-btn.kind-metalnut {
167 color: #C0C8D8;
168}
169
74d506c6 2026-04-12 Pavel Safronov170.toolbar-btn.kind-rock {
171 color: #9A7858;
172}
173
48f320c1 2026-04-12 Pavel Safronov174.toolbar-btn.kind-random {
175 color: #aaa;
176}
177
178/* ── Size pill (slides down from toolbar) ────────────────────── */
179#size-pill {
180 position: fixed;
181 top: max(68px, calc(env(safe-area-inset-top, 10px) + 58px));
182 left: 50%;
183 transform: translateX(-50%);
184 z-index: 49;
185 background: rgba(20, 20, 20, 0.88);
186 border-radius: 99px;
187 border: 1px solid rgba(255, 255, 255, 0.1);
188 backdrop-filter: blur(12px);
189 -webkit-backdrop-filter: blur(12px);
190 padding: 10px 18px;
191 display: none;
192 align-items: center;
193 gap: 12px;
194 min-width: 240px;
195 pointer-events: none;
196}
197
198#size-pill:not([hidden]) {
44eb5832 2026-04-12 Pavel Safronov199 display: flex;
48f320c1 2026-04-12 Pavel Safronov200 pointer-events: auto;
44eb5832 2026-04-12 Pavel Safronov201}
202
48f320c1 2026-04-12 Pavel Safronov203.size-pill-value {
204 font-family: system-ui, -apple-system, sans-serif;
205 font-size: 14px;
206 font-weight: 600;
207 color: #c8a84b;
208 min-width: 28px;
209 text-align: right;
210}
211
212/* Settings btn is now inside toolbar — no separate fixed positioning */
213#settings-btn {
214 /* inherits .toolbar-btn */
44eb5832 2026-04-12 Pavel Safronov215}
216
217/* ── Settings panel ─────────────────────────────────────────── */
218#settings-panel {
219 position: fixed;
220 inset: 0;
221 z-index: 80;
222}
223
224#settings-panel:not([hidden]) {
225 display: block;
226}
227
228.panel-backdrop {
229 position: absolute;
230 inset: 0;
231 background: rgba(0, 0, 0, 0.6);
232}
233
234.panel-sheet {
235 position: absolute;
236 bottom: 0;
237 left: 0;
238 right: 0;
239 background: #1e1e1e;
240 border-radius: 20px 20px 0 0;
241 padding: 12px 24px max(24px, env(safe-area-inset-bottom, 24px));
242 display: flex;
243 flex-direction: column;
244 gap: 16px;
245 font-family: system-ui, -apple-system, sans-serif;
246 color: #e0e0e0;
247}
248
249.panel-handle {
250 width: 36px;
251 height: 5px;
252 background: #444;
253 border-radius: 3px;
254 align-self: center;
255 margin-bottom: 4px;
256}
257
258.panel-sheet h2 {
259 font-size: 18px;
260 font-weight: 600;
261 color: #fff;
262}
263
264.setting-row {
265 display: flex;
266 justify-content: space-between;
267 align-items: center;
268 font-size: 15px;
269}
270
271.setting-value {
272 font-weight: 600;
273 color: #c8a84b;
274 min-width: 28px;
275 text-align: right;
276}
277
278input[type="range"] {
279 -webkit-appearance: none;
280 width: 100%;
281 height: 6px;
282 border-radius: 3px;
283 background: #333;
284 outline: none;
285 margin-top: -8px;
286}
287
288input[type="range"]::-webkit-slider-thumb {
289 -webkit-appearance: none;
290 width: 26px;
291 height: 26px;
292 border-radius: 50%;
293 background: #c8a84b;
294 cursor: pointer;
295 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
296}
297
298input[type="range"]::-moz-range-thumb {
299 width: 26px;
300 height: 26px;
301 border-radius: 50%;
302 background: #c8a84b;
303 cursor: pointer;
304 border: none;
305 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
306}
307
308.action-btn {
309 background: #2a2a2a;
310 border: 1px solid #3a3a3a;
311 color: #ccc;
312 font-size: 15px;
313 padding: 12px 16px;
314 border-radius: 10px;
315 cursor: pointer;
316 font-family: inherit;
317 text-align: center;
318 transition: background 0.15s;
319}
320
321.action-btn:active {
322 background: #333;
323}
324
f1262fd9 2026-04-12 Pavel Safronov325.action-btn.active {
326 background: #2a3a2a;
327 border-color: #4a7a4a;
328 color: #8fce8f;
329}
330
44eb5832 2026-04-12 Pavel Safronov331.close-btn {
332 background: #c8a84b;
333 border: none;
334 color: #111;
335 font-size: 16px;
336 font-weight: 600;
337 padding: 14px 16px;
338 border-radius: 12px;
339 cursor: pointer;
340 font-family: inherit;
341 transition: opacity 0.15s;
342}
343
344.close-btn:active {
345 opacity: 0.85;
346}
347
348.panel-links {
349 display: flex;
350 justify-content: center;
351 gap: 12px;
352 font-size: 14px;
353}
354
355.panel-links a {
356 color: #c8a84b;
357 text-decoration: none;
358}
359
360.panel-links a:active {
361 opacity: 0.7;
362}
363
364.panel-links span {
365 color: #444;
366}
367
98ba5504 2026-04-13 Pavel Safronov368/* ── Random pool section ─────────────────────────────────── */
369.pool-section {
370 display: flex;
371 flex-direction: column;
372 gap: 10px;
373}
374
375.pool-label {
376 font-size: 13px;
377 color: #888;
378 margin: 0;
379 text-transform: uppercase;
380 letter-spacing: 0.05em;
381}
382
383.pool-grid {
384 display: grid;
385 grid-template-columns: repeat(3, 1fr);
386 gap: 8px;
387}
388
389.pool-btn {
390 background: #2a2a2a;
391 border: 1px solid #3a3a3a;
392 color: #888;
393 font-size: 13px;
394 padding: 9px 6px;
395 border-radius: 9px;
396 cursor: pointer;
397 font-family: inherit;
398 text-align: center;
399 transition: background 0.15s, color 0.15s;
400}
401
402.pool-btn.active {
403 background: #1e2e1e;
404 border-color: #4a7a4a;
405 color: #c0e0c0;
406}
407
408.pool-btn:active {
409 opacity: 0.8;
410}
411
44eb5832 2026-04-12 Pavel Safronov412.attribution {
413 font-size: 12px;
414 color: #555;
415 text-align: center;
416}
417
418.attribution a {
419 color: #666;
420 text-decoration: underline;
421 text-underline-offset: 2px;
f1262fd9 2026-04-12 Pavel Safronov422}
423
98ba5504 2026-04-13 Pavel Safronov424.no-vibration-note {
425 font-size: 13px;
426 color: #666;
427 margin: 0;
428 line-height: 1.45;
429}
430
431/* ── Slow-frame recovery overlay ───────────────────────────── */
432#perf-overlay {
433 position: fixed;
434 inset: 0;
435 z-index: 200;
436 background: rgba(0, 0, 0, 0.75);
437 display: flex;
438 align-items: center;
439 justify-content: center;
440}
441
442#perf-overlay[hidden] {
443 display: none;
444}
445
446.perf-box {
447 background: #1e1e1e;
448 border-radius: 16px;
449 padding: 28px 24px;
450 max-width: 320px;
451 width: calc(100% - 48px);
452 display: flex;
453 flex-direction: column;
454 gap: 14px;
455 font-family: system-ui, -apple-system, sans-serif;
456}
457
458.perf-msg {
459 color: #ccc;
460 font-size: 15px;
461 line-height: 1.5;
462 margin: 0;
463 text-align: center;
464}
465
466.perf-btn {
467 background: #c8a84b;
468 border: none;
469 color: #111;
470 font-size: 15px;
471 font-weight: 600;
472 padding: 13px 16px;
473 border-radius: 11px;
474 cursor: pointer;
475 font-family: inherit;
476 transition: opacity 0.15s;
477}
478
479.perf-btn:active {
480 opacity: 0.8;
481}
482
483.perf-btn-secondary {
484 background: #2a2a2a;
485 border: 1px solid #3a3a3a;
486 color: #aaa;
487 font-weight: 400;
488}
489
f1262fd9 2026-04-12 Pavel Safronov490/* ── Share section ─────────────────────────────────────────────────────── */
491.share-section {
492 display: flex;
493 flex-direction: column;
494 align-items: center;
495 gap: 10px;
496 padding-top: 4px;
497 border-top: 1px solid #2a2a2a;
498}
499
500.share-label {
501 font-size: 13px;
502 color: #666;
503 align-self: flex-start;
504}
505
506#qr-canvas {
507 border-radius: 10px;
508 background: #fff;
509 padding: 8px;
510 width: 160px;
511 height: 160px;
512}
513
514/* ── Vibration hint toast ───────────────────────────────────────────────── */
515#vibration-hint {
516 position: fixed;
517 bottom: max(24px, env(safe-area-inset-bottom, 24px));
518 left: 50%;
519 transform: translateX(-50%);
520 background: rgba(30, 30, 30, 0.92);
521 color: #e0e0e0;
522 font-family: system-ui, -apple-system, sans-serif;
523 font-size: 13px;
524 line-height: 1.5;
525 padding: 10px 16px;
526 border-radius: 12px;
527 backdrop-filter: blur(8px);
528 -webkit-backdrop-filter: blur(8px);
529 border: 1px solid rgba(255, 255, 255, 0.08);
530 white-space: nowrap;
531 z-index: 60;
532 pointer-events: auto;
533 cursor: pointer;
534 opacity: 1;
535 transition: opacity 0.4s;
536}
537
538#vibration-hint.fade-out {
539 opacity: 0;
7bec8d9c 2026-04-13 Pavel Safronov540}
541
542/* ── Level switcher ─────────────────────────────────────────────────────── */
543#level-nav {
544 position: fixed;
545 bottom: max(18px, env(safe-area-inset-bottom, 18px));
546 left: 50%;
547 transform: translateX(-50%);
548 display: flex;
549 gap: 4px;
550 padding: 4px;
551 background: rgba(20, 20, 20, 0.72);
552 border-radius: 99px;
553 backdrop-filter: blur(12px);
554 -webkit-backdrop-filter: blur(12px);
555 border: 1px solid rgba(255, 255, 255, 0.08);
556 z-index: 60;
557}
558
559.level-btn {
560 padding: 7px 18px;
561 border: none;
562 border-radius: 99px;
563 background: transparent;
564 color: rgba(255, 255, 255, 0.45);
565 font-size: 13px;
566 font-weight: 600;
567 letter-spacing: 0.02em;
568 cursor: pointer;
569 transition: background 0.18s, color 0.18s;
570 -webkit-tap-highlight-color: transparent;
571 white-space: nowrap;
572}
573
574.level-btn:active {
575 background: rgba(255, 255, 255, 0.10);
576}
577
578.level-btn.active {
579 background: rgba(255, 255, 255, 0.13);
580 color: #fff;
44eb5832 2026-04-12 Pavel Safronov581}