1
2
3
4
5
6:root {
7 --bg-main: #0a0c14;
8 --bg-card: #141724;
9 --bg-board: #0e111a;
10 --bg-cell: #171b29;
11
12 --accent-cyan: #00f0ff;
13 --accent-gold: #ffb703;
14 --accent-green: #10b981;
15 --accent-red: #ef4444;
16 --accent-purple: #8b5cf6;
17
18 --text-main: #f3f4f6;
19 --text-muted: #9ca3af;
20 --border-color: #272d42;
21
22 --tile-size: 52px;
23
24 --font-retro: 'Press Start 2P', monospace;
25 --font-modern: 'Chakra Petch', system-ui, -apple-system, sans-serif;
26}
27
28
29* {
30 box-sizing: border-box;
31 margin: 0;
32 padding: 0;
33 user-select: none;
34 -webkit-user-select: none;
35}
36
37body {
38 background-color: var(--bg-main);
39 color: var(--text-main);
40 font-family: var(--font-modern);
41 min-height: 100vh;
42 display: flex;
43 justify-content: center;
44 align-items: center;
45 overflow-x: hidden;
46 position: relative;
47 background-image:
48 radial-gradient(circle at 50% 30%, rgba(0, 240, 255, 0.05) 0%, transparent 60%),
49 radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
50}
51
52
53.crt-overlay {
54 position: fixed;
55 top: 0;
56 left: 0;
57 width: 100vw;
58 height: 100vh;
59 background: linear-gradient(
60 rgba(18, 16, 16, 0) 50%,
61 rgba(0, 0, 0, 0.25) 50%
62 ), linear-gradient(
63 90deg,
64 rgba(255, 0, 0, 0.03),
65 rgba(0, 255, 0, 0.01),
66 rgba(0, 0, 255, 0.03)
67 );
68 background-size: 100% 4px, 6px 100%;
69 pointer-events: none;
70 z-index: 999;
71 opacity: 0.7;
72 transition: opacity 0.3s ease;
73}
74
75body.no-crt .crt-overlay {
76 opacity: 0;
77}
78
79
80.app-container {
81 width: 100%;
82 max-width: 860px;
83 padding: 16px;
84 display: flex;
85 flex-direction: column;
86 gap: 14px;
87 margin: 0 auto;
88}
89
90
91.game-header {
92 display: flex;
93 justify-content: space-between;
94 align-items: center;
95 background: var(--bg-card);
96 padding: 12px 20px;
97 border-radius: 12px;
98 border: 1px solid var(--border-color);
99 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
100}
101
102.logo-container {
103 display: flex;
104 align-items: center;
105 gap: 10px;
106}
107
108.logo-icon {
109 font-size: 1.8rem;
110 filter: drop-shadow(0 0 6px rgba(255, 183, 3, 0.6));
111}
112
113.logo-title {
114 font-family: var(--font-retro);
115 font-size: 1.4rem;
116 color: var(--accent-cyan);
117 text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 2px 2px 0px #000;
118 letter-spacing: 1px;
119}
120
121.logo-badge {
122 font-size: 0.65rem;
123 background: linear-gradient(135deg, var(--accent-gold), #d97706);
124 color: #000;
125 font-weight: 700;
126 padding: 2px 8px;
127 border-radius: 4px;
128 letter-spacing: 1px;
129}
130
131.header-controls {
132 display: flex;
133 gap: 8px;
134}
135
136.btn-icon {
137 background: var(--bg-main);
138 border: 1px solid var(--border-color);
139 color: var(--text-main);
140 width: 38px;
141 height: 38px;
142 border-radius: 8px;
143 cursor: pointer;
144 display: flex;
145 align-items: center;
146 justify-content: center;
147 font-size: 1.1rem;
148 transition: all 0.15s ease;
149}
150
151.btn-icon:hover {
152 border-color: var(--accent-cyan);
153 background: rgba(0, 240, 255, 0.1);
154 transform: translateY(-1px);
155}
156
157.btn-icon:active {
158 transform: translateY(1px);
159}
160
161
162.level-strip-container {
163 background: var(--bg-card);
164 border-radius: 12px;
165 padding: 10px 14px;
166 border: 1px solid var(--border-color);
167 display: flex;
168 flex-direction: column;
169 gap: 8px;
170}
171
172.strip-label {
173 display: flex;
174 justify-content: space-between;
175 font-size: 0.75rem;
176 font-weight: 700;
177 color: var(--text-muted);
178 letter-spacing: 1px;
179}
180
181.progress-badge {
182 color: var(--accent-gold);
183}
184
185.level-strip {
186 display: flex;
187 gap: 8px;
188 overflow-x: auto;
189 padding-bottom: 4px;
190}
191
192.level-strip::-webkit-scrollbar {
193 height: 4px;
194}
195
196.level-strip::-webkit-scrollbar-thumb {
197 background: var(--border-color);
198 border-radius: 4px;
199}
200
201.lvl-btn {
202 flex: 1;
203 min-width: 68px;
204 height: 52px;
205 background: var(--bg-main);
206 border: 1px solid var(--border-color);
207 border-radius: 8px;
208 color: var(--text-muted);
209 cursor: pointer;
210 display: flex;
211 flex-direction: column;
212 align-items: center;
213 justify-content: center;
214 gap: 2px;
215 font-family: var(--font-modern);
216 font-weight: 700;
217 transition: all 0.2s ease;
218 position: relative;
219}
220
221.lvl-btn.unlocked {
222 color: var(--text-main);
223 border-color: #3b4261;
224}
225
226.lvl-btn.unlocked:hover {
227 border-color: var(--accent-cyan);
228 background: rgba(0, 240, 255, 0.08);
229}
230
231.lvl-btn.active {
232 border-color: var(--accent-cyan);
233 background: rgba(0, 240, 255, 0.15);
234 box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
235 color: #fff;
236}
237
238.lvl-btn.completed {
239 border-color: var(--accent-green);
240}
241
242.lvl-num {
243 font-size: 0.95rem;
244}
245
246.lvl-stars {
247 font-size: 0.65rem;
248 color: var(--accent-gold);
249 line-height: 1;
250}
251
252.lvl-btn.locked {
253 opacity: 0.4;
254 cursor: not-allowed;
255}
256
257
258.game-area {
259 background: var(--bg-card);
260 border: 1px solid var(--border-color);
261 border-radius: 12px;
262 padding: 16px;
263 display: flex;
264 flex-direction: column;
265 align-items: center;
266 gap: 14px;
267 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
268}
269
270
271.hud-bar {
272 width: 100%;
273 display: grid;
274 grid-template-columns: 1.4fr 2fr 1fr;
275 gap: 10px;
276}
277
278@media (max-width: 600px) {
279 .hud-bar {
280 grid-template-columns: 1fr;
281 }
282}
283
284.hud-card {
285 background: var(--bg-main);
286 border: 1px solid var(--border-color);
287 border-radius: 8px;
288 padding: 8px 12px;
289 display: flex;
290 flex-direction: column;
291 justify-content: center;
292}
293
294.hud-label {
295 font-size: 0.65rem;
296 color: var(--text-muted);
297 font-weight: 700;
298 letter-spacing: 0.8px;
299}
300
301.hud-value {
302 font-size: 1rem;
303 font-weight: 700;
304 color: var(--accent-cyan);
305 white-space: nowrap;
306 overflow: hidden;
307 text-overflow: ellipsis;
308}
309
310.hud-card.stats {
311 flex-direction: row;
312 justify-content: space-around;
313 align-items: center;
314}
315
316.stat-item {
317 display: flex;
318 align-items: center;
319 gap: 4px;
320 font-size: 0.85rem;
321 font-weight: 700;
322}
323
324.stat-icon {
325 font-size: 0.95rem;
326}
327
328.stat-label {
329 color: var(--text-muted);
330 font-size: 0.7rem;
331}
332
333.stat-value {
334 color: var(--accent-gold);
335 min-width: 24px;
336}
337
338
339.board-wrapper {
340 background: var(--bg-board);
341 padding: 16px;
342 border-radius: 10px;
343 border: 2px solid var(--border-color);
344 box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.5);
345 display: flex;
346 justify-content: center;
347 align-items: center;
348 min-height: 280px;
349 max-width: 100%;
350 overflow: auto;
351}
352
353.game-board {
354 display: grid;
355 gap: 0;
356 user-select: none;
357 margin: 0 auto;
358 border-radius: 4px;
359 overflow: hidden;
360 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
361}
362
363
364
365
366
367.tile {
368 width: var(--tile-size);
369 height: var(--tile-size);
370 position: relative;
371 box-sizing: border-box;
372}
373
374
375.tile-floor {
376 background-color: var(--bg-cell);
377 background-image:
378 linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
379 linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
380 background-size: 100% 100%;
381 border: 1px solid rgba(255, 255, 255, 0.03);
382}
383
384
385.tile-wall {
386 background: linear-gradient(135deg, #2b3245 0%, #1a1e2b 100%);
387 border-top: 3px solid #485475;
388 border-left: 3px solid #3c4663;
389 border-bottom: 3px solid #11141d;
390 border-right: 3px solid #151924;
391 box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.7);
392 position: relative;
393}
394
395.tile-wall::after {
396 content: '';
397 position: absolute;
398 top: 25%;
399 left: 10%;
400 right: 10%;
401 bottom: 25%;
402 border-top: 1px solid rgba(255, 255, 255, 0.08);
403 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
404}
405
406
407.tile-goal {
408 background-color: var(--bg-cell);
409 border: 1px solid rgba(255, 255, 255, 0.03);
410 display: flex;
411 align-items: center;
412 justify-content: center;
413}
414
415.tile-goal::before {
416 content: '';
417 width: 44%;
418 height: 44%;
419 border-radius: 50%;
420 background: radial-gradient(circle, var(--accent-gold) 20%, rgba(255, 183, 3, 0.2) 70%, transparent 100%);
421 border: 2px dashed var(--accent-gold);
422 box-shadow: 0 0 10px rgba(255, 183, 3, 0.7);
423 animation: pulse-goal 2s infinite ease-in-out;
424}
425
426@keyframes pulse-goal {
427 0%, 100% { transform: scale(0.9); opacity: 0.8; }
428 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 14px rgba(255, 183, 3, 0.9); }
429}
430
431
432.tile-box {
433 background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
434 border-top: 3px solid #f59e0b;
435 border-left: 3px solid #d97706;
436 border-bottom: 3px solid #78350f;
437 border-right: 3px solid #92400e;
438 border-radius: 4px;
439 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.3);
440 position: relative;
441 display: flex;
442 align-items: center;
443 justify-content: center;
444}
445
446
447.tile-box::before, .tile-box::after {
448 content: '';
449 position: absolute;
450 background: rgba(120, 53, 15, 0.5);
451 border: 1px solid rgba(245, 158, 11, 0.3);
452}
453
454.tile-box::before {
455 width: 75%;
456 height: 6px;
457 transform: rotate(45deg);
458}
459
460.tile-box::after {
461 width: 75%;
462 height: 6px;
463 transform: rotate(-45deg);
464}
465
466
467.tile-box.on-goal {
468 background: linear-gradient(135deg, #10b981 0%, #047857 100%);
469 border-top: 3px solid #34d399;
470 border-left: 3px solid #10b981;
471 border-bottom: 3px solid #064e3b;
472 border-right: 3px solid #065f46;
473 box-shadow: 0 0 16px rgba(16, 185, 129, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
474 animation: box-goal-bounce 0.3s ease-out;
475}
476
477.tile-box.on-goal::before, .tile-box.on-goal::after {
478 background: rgba(6, 78, 59, 0.6);
479 border-color: rgba(52, 211, 153, 0.5);
480}
481
482.tile-box.on-goal::after {
483 content: '★';
484 width: auto;
485 height: auto;
486 background: none;
487 border: none;
488 color: #fff;
489 font-size: 1rem;
490 text-shadow: 0 0 6px #fff;
491 transform: none;
492 z-index: 2;
493}
494
495@keyframes box-goal-bounce {
496 0% { transform: scale(1.15); }
497 50% { transform: scale(0.95); }
498 100% { transform: scale(1); }
499}
500
501
502.tile-player {
503 background-color: var(--bg-cell);
504 display: flex;
505 align-items: center;
506 justify-content: center;
507 position: relative;
508}
509
510.player-avatar {
511 width: 76%;
512 height: 76%;
513 background: linear-gradient(135deg, #00f0ff 0%, #0284c7 100%);
514 border-radius: 50%;
515 border: 2px solid #e0f2fe;
516 box-shadow: 0 0 10px rgba(0, 240, 255, 0.7), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
517 position: relative;
518 display: flex;
519 align-items: center;
520 justify-content: center;
521 transition: transform 0.1s ease;
522}
523
524
525.player-eyes {
526 position: absolute;
527 display: flex;
528 gap: 4px;
529}
530
531.eye {
532 width: 5px;
533 height: 7px;
534 background: #fff;
535 border-radius: 2px;
536 box-shadow: 0 0 4px #fff;
537 position: relative;
538}
539
540.eye::after {
541 content: '';
542 position: absolute;
543 width: 3px;
544 height: 3px;
545 background: #0f172a;
546 border-radius: 50%;
547 top: 2px;
548 left: 1px;
549}
550
551
552.face-down .player-eyes { top: 40%; left: 50%; transform: translateX(-50%); }
553.face-up .player-eyes { display: none; }
554.face-left .player-eyes { top: 35%; left: 22%; }
555.face-right .player-eyes { top: 35%; right: 22%; }
556
557.face-up .player-avatar::after {
558 content: '';
559 position: absolute;
560 top: 25%;
561 width: 50%;
562 height: 4px;
563 background: rgba(255, 255, 255, 0.4);
564 border-radius: 2px;
565}
566
567
568.step-anim .player-avatar {
569 animation: step-bounce 0.12s ease;
570}
571
572@keyframes step-bounce {
573 0% { transform: scale(1); }
574 50% { transform: scale(1.12); }
575 100% { transform: scale(1); }
576}
577
578
579.action-bar {
580 width: 100%;
581 display: flex;
582 justify-content: space-between;
583 align-items: center;
584 gap: 10px;
585 flex-wrap: wrap;
586}
587
588.btn {
589 font-family: var(--font-modern);
590 font-weight: 700;
591 font-size: 0.9rem;
592 padding: 10px 16px;
593 border-radius: 8px;
594 border: 1px solid var(--border-color);
595 background: var(--bg-main);
596 color: var(--text-main);
597 cursor: pointer;
598 display: flex;
599 align-items: center;
600 gap: 8px;
601 transition: all 0.15s ease;
602}
603
604.btn-action:hover {
605 border-color: var(--accent-cyan);
606 background: rgba(0, 240, 255, 0.1);
607}
608
609.btn-danger:hover {
610 border-color: var(--accent-red);
611 background: rgba(239, 68, 68, 0.15);
612 color: #fca5a5;
613}
614
615.btn-secondary {
616 background: var(--bg-main);
617 border-color: var(--border-color);
618 color: var(--text-muted);
619}
620
621.btn-secondary:hover {
622 color: var(--text-main);
623 border-color: #4b5563;
624}
625
626.btn-primary {
627 background: linear-gradient(135deg, var(--accent-cyan) 0%, #0284c7 100%);
628 color: #000;
629 border: none;
630 font-weight: 700;
631}
632
633.btn-glow {
634 box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
635}
636
637.btn-glow:hover {
638 transform: translateY(-2px);
639 box-shadow: 0 0 22px rgba(0, 240, 255, 0.8);
640}
641
642.btn:disabled {
643 opacity: 0.4;
644 cursor: not-allowed;
645 transform: none !important;
646 box-shadow: none !important;
647}
648
649.kbd-hint {
650 font-size: 0.65rem;
651 background: rgba(255, 255, 255, 0.1);
652 padding: 2px 5px;
653 border-radius: 4px;
654 border: 1px solid rgba(255, 255, 255, 0.2);
655}
656
657.nav-level-btns {
658 display: flex;
659 gap: 6px;
660}
661
662
663.mobile-dpad-container {
664 display: none;
665 margin-top: 6px;
666}
667
668@media (max-width: 768px), (pointer: coarse) {
669 .mobile-dpad-container {
670 display: block;
671 }
672}
673
674.dpad-grid {
675 display: grid;
676 grid-template-columns: repeat(3, 50px);
677 grid-template-rows: repeat(3, 50px);
678 gap: 6px;
679 margin: 0 auto;
680}
681
682.dpad-btn {
683 background: var(--bg-main);
684 border: 1px solid var(--border-color);
685 color: var(--accent-cyan);
686 font-size: 1.2rem;
687 border-radius: 10px;
688 display: flex;
689 align-items: center;
690 justify-content: center;
691 cursor: pointer;
692 touch-action: manipulation;
693 transition: background 0.1s;
694}
695
696.dpad-btn:active {
697 background: rgba(0, 240, 255, 0.25);
698 border-color: var(--accent-cyan);
699}
700
701.dpad-up { grid-column: 2; grid-row: 1; }
702.dpad-left { grid-column: 1; grid-row: 2; }
703.dpad-down { grid-column: 2; grid-row: 3; }
704.dpad-right { grid-column: 3; grid-row: 2; }
705.dpad-center { grid-column: 2; grid-row: 2; background: rgba(255,255,255,0.02); border-radius: 50%; }
706
707
708.game-footer {
709 display: flex;
710 flex-direction: column;
711 align-items: center;
712 gap: 8px;
713 padding: 10px;
714 font-size: 0.8rem;
715 color: var(--text-muted);
716}
717
718.legend-items {
719 display: flex;
720 gap: 16px;
721 flex-wrap: wrap;
722 justify-content: center;
723}
724
725.legend-item {
726 display: flex;
727 align-items: center;
728 gap: 6px;
729 font-size: 0.75rem;
730}
731
732.legend-tile {
733 width: 16px;
734 height: 16px;
735 border-radius: 3px;
736 display: inline-block;
737}
738
739.wall-legend { background: #2b3245; border: 1px solid #485475; }
740.box-legend { background: #d97706; border: 1px solid #f59e0b; }
741.goal-legend { background: rgba(255, 183, 3, 0.3); border: 1px dashed var(--accent-gold); }
742.box-goal-legend { background: #10b981; border: 1px solid #34d399; }
743.player-legend { background: #00f0ff; border: 1px solid #e0f2fe; border-radius: 50%; }
744
745.keyboard-legend kbd {
746 background: var(--bg-card);
747 border: 1px solid var(--border-color);
748 padding: 1px 4px;
749 border-radius: 3px;
750 color: var(--accent-cyan);
751}
752
753
754.modal-overlay {
755 position: fixed;
756 top: 0;
757 left: 0;
758 width: 100vw;
759 height: 100vh;
760 background: rgba(5, 7, 13, 0.85);
761 backdrop-filter: blur(6px);
762 display: flex;
763 align-items: center;
764 justify-content: center;
765 z-index: 1000;
766 opacity: 1;
767 transition: opacity 0.25s ease;
768}
769
770.modal-overlay.hidden {
771 opacity: 0;
772 pointer-events: none;
773}
774
775.modal-content {
776 background: var(--bg-card);
777 border: 2px solid var(--border-color);
778 border-radius: 16px;
779 padding: 24px;
780 width: 90%;
781 max-width: 440px;
782 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
783 animation: modal-slide 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
784}
785
786@keyframes modal-slide {
787 0% { transform: translateY(30px) scale(0.9); }
788 100% { transform: translateY(0) scale(1); }
789}
790
791.victory-card {
792 text-align: center;
793 border-color: var(--accent-cyan);
794 box-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
795}
796
797.victory-crown {
798 font-size: 3rem;
799 margin-bottom: 4px;
800}
801
802.win-level-sub {
803 color: var(--text-muted);
804 font-size: 0.9rem;
805 margin-top: 4px;
806}
807
808.star-rating {
809 font-size: 2.2rem;
810 margin: 14px 0;
811 display: flex;
812 justify-content: center;
813 gap: 8px;
814}
815
816.star {
817 color: #374151;
818 transition: color 0.3s, transform 0.3s;
819}
820
821.star.lit {
822 color: var(--accent-gold);
823 text-shadow: 0 0 12px rgba(255, 183, 3, 0.8);
824 animation: star-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
825}
826
827@keyframes star-pop {
828 0% { transform: scale(0); }
829 80% { transform: scale(1.3); }
830 100% { transform: scale(1); }
831}
832
833.win-stats-grid {
834 display: grid;
835 grid-template-columns: repeat(3, 1fr);
836 gap: 8px;
837 margin: 18px 0;
838}
839
840.win-stat-box {
841 background: var(--bg-main);
842 border: 1px solid var(--border-color);
843 border-radius: 8px;
844 padding: 10px 4px;
845 display: flex;
846 flex-direction: column;
847 align-items: center;
848}
849
850.win-stat-title {
851 font-size: 0.65rem;
852 color: var(--text-muted);
853 font-weight: 700;
854}
855
856.win-stat-num {
857 font-size: 1.2rem;
858 font-weight: 700;
859 color: var(--accent-cyan);
860 margin: 2px 0;
861}
862
863.win-stat-par {
864 font-size: 0.65rem;
865 color: var(--accent-gold);
866}
867
868.badge-record {
869 font-size: 0.6rem;
870 background: var(--accent-green);
871 color: #000;
872 font-weight: 700;
873 padding: 1px 4px;
874 border-radius: 3px;
875}
876
877.modal-actions {
878 display: flex;
879 justify-content: center;
880 gap: 12px;
881 margin-top: 10px;
882}
883
884
885.help-card {
886 max-width: 520px;
887}
888
889.modal-header {
890 display: flex;
891 justify-content: space-between;
892 align-items: center;
893 border-bottom: 1px solid var(--border-color);
894 padding-bottom: 10px;
895 margin-bottom: 14px;
896}
897
898.btn-close {
899 background: none;
900 border: none;
901 color: var(--text-muted);
902 font-size: 1.5rem;
903 cursor: pointer;
904}
905
906.btn-close:hover {
907 color: var(--text-main);
908}
909
910.help-body {
911 display: flex;
912 flex-direction: column;
913 gap: 14px;
914}
915
916.help-section h3 {
917 font-size: 0.95rem;
918 color: var(--accent-cyan);
919 margin-bottom: 6px;
920}
921
922.help-section p, .help-section li {
923 font-size: 0.85rem;
924 color: var(--text-muted);
925 line-height: 1.4;
926}
927
928.help-section ul {
929 padding-left: 18px;
930}
931
932.help-controls-grid {
933 display: grid;
934 grid-template-columns: 1fr 1.5fr;
935 gap: 6px;
936 font-size: 0.8rem;
937 background: var(--bg-main);
938 padding: 10px;
939 border-radius: 8px;
940 border: 1px solid var(--border-color);
941}
942
943.help-controls-grid kbd {
944 background: var(--bg-card);
945 border: 1px solid var(--border-color);
946 padding: 1px 5px;
947 border-radius: 3px;
948 color: var(--accent-cyan);
949}
950
951
952.hidden {
953 display: none !important;
954}
955
956.flex-center {
957 display: flex;
958 align-items: center;
959 justify-content: center;
960}
961
962.gold-text {
963 color: var(--accent-gold);
964 text-shadow: 0 0 10px rgba(255, 183, 3, 0.5);
965}
966
967
968@media (max-width: 520px) {
969 :root {
970 --tile-size: 40px;
971 }
972
973 .app-container {
974 padding: 8px;
975 }
976
977 .logo-title {
978 font-size: 1.1rem;
979 }
980
981 .hud-value {
982 font-size: 0.85rem;
983 }
984}
985
986@media (max-width: 400px) {
987 :root {
988 --tile-size: 32px;
989 }
990}
991
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.