jaml-ui 0.20.1 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/assets.d.ts +0 -5
  2. package/dist/assets.js +0 -7
  3. package/dist/components/JamlCurator.d.ts +1 -2
  4. package/dist/components/JamlCurator.js +2 -2
  5. package/dist/hooks/searchWorker.d.ts +1 -0
  6. package/dist/hooks/searchWorker.js +68 -0
  7. package/dist/hooks/useSearch.d.ts +1 -1
  8. package/dist/hooks/useSearch.js +8 -13
  9. package/dist/render/CanvasRenderer.js +2 -2
  10. package/dist/ui/hooks.d.ts +13 -0
  11. package/dist/ui/hooks.js +44 -0
  12. package/dist/ui/jimbo.css +1092 -1086
  13. package/dist/ui/panel.d.ts +1 -1
  14. package/dist/ui/panel.js +7 -6
  15. package/package.json +1 -1
package/dist/ui/jimbo.css CHANGED
@@ -1,1086 +1,1092 @@
1
- /* ═══════════════════════════════════════════════════════════════════════════
2
- jimbo.css — Jimbo Design System
3
- Balatro-inspired design tokens + component classes.
4
- Eyedropped from actual game shader output — not Lua hex values.
5
- ═══════════════════════════════════════════════════════════════════════════ */
6
-
7
- /* Global Scrollbar Hide */
8
- * {
9
- scrollbar-width: none !important;
10
- -ms-overflow-style: none !important;
11
- }
12
- *::-webkit-scrollbar {
13
- display: none !important;
14
- }
15
-
16
- /* ── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
17
-
18
- :root {
19
- /* Colors — eyedropped from Balatro's rendered shader output */
20
- --j-red: #ff4c40;
21
- --j-blue: #0093ff;
22
- --j-green: #429f79;
23
- --j-orange: #ff9800;
24
- --j-gold: #e4b643;
25
- --j-purple: #9e74ce;
26
-
27
- --j-dark-red: #a02721;
28
- --j-dark-blue: #0057a1;
29
- --j-dark-orange: #a05b00;
30
- --j-dark-green: #215f46;
31
- --j-dark-purple: #5e437e;
32
-
33
- --j-dark-grey: #3a5055;
34
- --j-darkest: #1e2b2d;
35
- --j-grey: #708386;
36
- --j-teal-grey: #404c4e;
37
-
38
- --j-panel-edge: #1e2e32;
39
- --j-inner-border: #334461;
40
- --j-border-silver: #b9c2d2;
41
- --j-border-south: #777e89;
42
-
43
- --j-gold-text: #e4b643;
44
- --j-green-text: #35bd86;
45
- --j-orange-text: #ff8f00;
46
- --j-white: #ffffff;
47
- --j-black: #000000;
48
-
49
- --j-tarot-btn: #9e74ce;
50
- --j-planet-btn: #00a7ca;
51
- --j-spectral-btn: #2e76fd;
52
- --j-tarot-btn-dark: #5e437e;
53
- --j-planet-btn-dark: #00657c;
54
- --j-spectral-btn-dark: #14449e;
55
-
56
- /* Typography */
57
- --j-font: 'm6x11plus', 'Courier New', monospace;
58
- --j-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
59
-
60
- /* Spacing */
61
- --j-space-xs: 2px;
62
- --j-space-sm: 4px;
63
- --j-space-md: 8px;
64
- --j-space-lg: 12px;
65
- --j-space-xl: 16px;
66
-
67
- /* Radii — Balatro is chunky, not bubbly. Never > 10px. */
68
- --j-radius-sm: 4px;
69
- --j-radius-md: 6px;
70
- --j-radius-lg: 8px;
71
- --j-radius-pill: 10px;
72
-
73
- /* Animation */
74
- --j-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
75
- --j-press-y: 3px;
76
- --j-press-speed: 55ms;
77
- }
78
-
79
-
80
- /* ── Base Text ─────────────────────────────────────────────────────────── */
81
-
82
- .j-text {
83
- font-family: var(--j-font);
84
- font-weight: 400;
85
- line-height: 1.2;
86
- text-shadow: var(--j-text-shadow);
87
- color: var(--j-white);
88
- }
89
- .j-text--no-shadow { text-shadow: none; }
90
- .j-text--upper {
91
- text-transform: uppercase;
92
- letter-spacing: 0.08em;
93
- }
94
-
95
- /* Sizes (from DESIGN.md typography scale) */
96
- .j-text--display { font-size: 26px; letter-spacing: 0.04em; line-height: 1; }
97
- .j-text--xl { font-size: 24px; letter-spacing: 0.04em; }
98
- .j-text--lg { font-size: 18px; letter-spacing: 0.04em; }
99
- .j-text--heading { font-size: 14px; letter-spacing: 0.08em; line-height: 1.2; }
100
- .j-text--md { font-size: 14px; }
101
- .j-text--sm { font-size: 12px; }
102
- .j-text--body { font-size: 11px; letter-spacing: 0.05em; line-height: 1.3; }
103
- .j-text--xs { font-size: 10px; }
104
- .j-text--label { font-size: 9px; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; }
105
- .j-text--micro { font-size: 8px; letter-spacing: 0.08em; line-height: 1; }
106
-
107
- /* Tones */
108
- .j-text--default { color: var(--j-white); }
109
- .j-text--mult,
110
- .j-text--red { color: var(--j-red); }
111
- .j-text--chips,
112
- .j-text--blue { color: var(--j-blue); }
113
- .j-text--gold { color: var(--j-gold-text); }
114
- .j-text--green { color: var(--j-green-text); }
115
- .j-text--orange { color: var(--j-orange-text); }
116
- .j-text--purple { color: var(--j-purple); }
117
- .j-text--grey { color: var(--j-grey); }
118
-
119
-
120
- /* ── Panel ─────────────────────────────────────────────────────────────── */
121
-
122
- .j-panel {
123
- background-color: var(--j-dark-grey);
124
- border: 2px solid var(--j-border-silver);
125
- border-bottom-color: var(--j-border-south);
126
- border-radius: var(--j-radius-md);
127
- box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55),
128
- inset 0 0 0 1px rgba(255, 255, 255, 0.04);
129
- padding: var(--j-space-lg);
130
- display: flex;
131
- flex-direction: column;
132
- align-items: stretch;
133
- overflow: visible;
134
- position: relative;
135
- }
136
-
137
- .j-panel__body {
138
- flex: 1;
139
- overflow: auto;
140
- }
141
-
142
- .j-panel__back {
143
- margin-top: var(--j-space-lg);
144
- padding-top: var(--j-space-md);
145
- flex-shrink: 0;
146
- }
147
-
148
- .j-inner-panel {
149
- background-color: var(--j-inner-border);
150
- border: 2px solid var(--j-panel-edge);
151
- border-radius: var(--j-radius-md);
152
- padding: var(--j-space-lg);
153
- }
154
-
155
-
156
- /* ── Button ────────────────────────────────────────────────────────────── */
157
- /* Chunky 3D press: colored underside via offset shadow div,
158
- press sinks the face +3px and collapses the shadow. */
159
-
160
- .j-btn {
161
- display: inline-block;
162
- position: relative;
163
- cursor: pointer;
164
- -webkit-user-select: none;
165
- user-select: none;
166
- }
167
- .j-btn--full { width: 100%; }
168
- .j-btn--disabled {
169
- opacity: 0.55;
170
- cursor: not-allowed;
171
- }
172
-
173
- .j-btn__shadow {
174
- position: absolute;
175
- left: 1px;
176
- top: 3px;
177
- right: -1px;
178
- bottom: -3px;
179
- border-radius: var(--j-radius-md);
180
- background: var(--j-btn-shadow-color, var(--j-dark-orange));
181
- transition: opacity var(--j-press-speed) linear;
182
- }
183
- .j-btn[data-pressed="true"] .j-btn__shadow { opacity: 0; }
184
-
185
- .j-btn__face {
186
- position: relative;
187
- border-radius: var(--j-radius-md);
188
- background: var(--j-btn-face-color, var(--j-orange));
189
- text-align: center;
190
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
191
- transform: translate(0, 0);
192
- transition: transform var(--j-press-speed) linear;
193
- }
194
- .j-btn[data-pressed="true"] .j-btn__face {
195
- transform: translate(1px, 3px);
196
- }
197
-
198
- /* Sizes */
199
- .j-btn--xs .j-btn__face { padding: 2px 8px; }
200
- .j-btn--sm .j-btn__face { padding: 4px 10px; }
201
- .j-btn--md .j-btn__face { padding: 6px 14px; }
202
- .j-btn--lg .j-btn__face { padding: 10px 18px; }
203
-
204
- /* Tone colors — set via CSS custom properties */
205
- .j-btn--orange { --j-btn-face-color: var(--j-orange); --j-btn-shadow-color: var(--j-dark-orange); }
206
- .j-btn--red { --j-btn-face-color: var(--j-red); --j-btn-shadow-color: var(--j-dark-red); }
207
- .j-btn--blue { --j-btn-face-color: var(--j-blue); --j-btn-shadow-color: var(--j-dark-blue); }
208
- .j-btn--green { --j-btn-face-color: var(--j-green); --j-btn-shadow-color: var(--j-dark-green); }
209
- .j-btn--gold { --j-btn-face-color: var(--j-gold); --j-btn-shadow-color: #8a6a1e; }
210
- .j-btn--grey { --j-btn-face-color: var(--j-dark-grey); --j-btn-shadow-color: var(--j-darkest); }
211
-
212
-
213
- /* ── Badge ─────────────────────────────────────────────────────────────── */
214
-
215
- .j-badge {
216
- display: inline-flex;
217
- align-items: center;
218
- border-radius: var(--j-radius-sm);
219
- font-family: var(--j-font);
220
- font-weight: 400;
221
- letter-spacing: 0.04em;
222
- white-space: nowrap;
223
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
224
- border: none;
225
- }
226
- .j-badge--sm { padding: 2px 6px; font-size: 10px; }
227
- .j-badge--md { padding: 4px 8px; font-size: 12px; }
228
-
229
- /* Badge tones — dark-colored bottom edge, no thin pixel borders */
230
- .j-badge--dark { background: var(--j-darkest); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-panel-edge); }
231
- .j-badge--blue { background: var(--j-blue); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-blue); }
232
- .j-badge--red { background: var(--j-red); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-red); }
233
- .j-badge--green { background: var(--j-green); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-green); }
234
- .j-badge--gold { background: var(--j-gold); color: var(--j-black); box-shadow: 0 2px 0 0 #8a6a1e; }
235
- .j-badge--grey { background: var(--j-grey); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-teal-grey); }
236
- .j-badge--orange { background: var(--j-orange); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-orange); }
237
- .j-badge--purple { background: var(--j-purple); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-purple); }
238
-
239
-
240
- /* ── Tabs ──────────────────────────────────────────────────────────────── */
241
-
242
- .j-tabs {
243
- display: flex;
244
- gap: var(--j-space-md);
245
- align-items: flex-end;
246
- flex-wrap: wrap;
247
- }
248
-
249
- .j-tab {
250
- display: flex;
251
- flex-direction: column;
252
- align-items: center;
253
- position: relative;
254
- }
255
-
256
- .j-tab__indicator {
257
- margin-bottom: var(--j-space-sm);
258
- }
259
- .j-tab__indicator[data-active="true"] {
260
- animation: jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite;
261
- }
262
- .j-tab__indicator[data-active="false"] {
263
- visibility: hidden;
264
- }
265
-
266
- .j-tab__btn {
267
- border: none;
268
- cursor: pointer;
269
- border-radius: var(--j-radius-lg);
270
- padding: 4px 12px;
271
- background-color: var(--j-red);
272
- box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
273
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
274
- transition: none;
275
- }
276
- .j-tab__btn:hover,
277
- .j-tab__btn:active {
278
- background-color: var(--j-dark-red);
279
- }
280
- .j-tab__btn[data-pressed="true"] {
281
- transform: translateY(2px);
282
- box-shadow: none;
283
- }
284
-
285
- @keyframes jimbo-bounce {
286
- 0%, 100% { transform: translateY(0); }
287
- 50% { transform: translateY(-3px); }
288
- }
289
-
290
- /* Vertical tabs */
291
- .j-vtabs {
292
- display: flex;
293
- flex-direction: column;
294
- gap: var(--j-space-sm);
295
- }
296
-
297
- .j-vtab {
298
- border: none;
299
- cursor: pointer;
300
- border-radius: 8px 0 0 8px;
301
- padding: 16px 8px;
302
- background-color: var(--j-red);
303
- writing-mode: vertical-rl;
304
- text-orientation: mixed;
305
- transform: rotate(180deg);
306
- transition: none;
307
- }
308
-
309
-
310
- /* ── Toggle List ──────────────────────────────────────────────────────── */
311
-
312
- .j-toggle-list {
313
- display: flex;
314
- flex-direction: column;
315
- gap: var(--j-space-sm);
316
- }
317
-
318
- .j-toggle-list__title {
319
- font-family: var(--j-font);
320
- font-size: 12px;
321
- color: var(--j-grey);
322
- text-transform: uppercase;
323
- letter-spacing: 0.04em;
324
- margin-bottom: var(--j-space-sm);
325
- }
326
-
327
- .j-toggle-item {
328
- display: flex;
329
- align-items: center;
330
- gap: var(--j-space-md);
331
- padding: 6px 8px;
332
- background: rgba(255, 255, 255, 0.05);
333
- border: 1px solid rgba(0, 0, 0, 0.2);
334
- border-radius: var(--j-radius-sm);
335
- cursor: pointer;
336
- font-family: var(--j-font);
337
- color: var(--j-white);
338
- text-transform: uppercase;
339
- letter-spacing: 0.04em;
340
- text-align: left;
341
- justify-content: flex-start;
342
- }
343
-
344
- .j-toggle-check {
345
- width: 10px;
346
- height: 10px;
347
- flex-shrink: 0;
348
- border: 1px solid var(--j-dark-grey);
349
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
350
- }
351
- .j-toggle-check[data-on="true"] { background: var(--j-orange); }
352
- .j-toggle-check[data-on="false"] { background: var(--j-darkest); }
353
-
354
-
355
- /* ── Tooltip ──────────────────────────────────────────────────────────── */
356
-
357
- .j-tooltip {
358
- position: fixed;
359
- max-width: 280px;
360
- padding: 6px 10px;
361
- border-radius: var(--j-radius-md);
362
- background: var(--j-darkest);
363
- border: 2px solid var(--j-border-silver);
364
- box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
365
- color: var(--j-white);
366
- pointer-events: none;
367
- z-index: 10000;
368
- transition: opacity 120ms ease;
369
- }
370
-
371
-
372
- /* ── Flank Nav ────────────────────────────────────────────────────────── */
373
-
374
- .j-flank {
375
- display: flex;
376
- align-items: stretch;
377
- justify-content: center;
378
- gap: var(--j-space-md);
379
- width: 100%;
380
- position: relative;
381
- }
382
-
383
- .j-flank__content {
384
- position: relative;
385
- flex: 1;
386
- min-width: 0;
387
- display: flex;
388
- flex-direction: column;
389
- }
390
-
391
- .j-flank__btn {
392
- flex-shrink: 0;
393
- width: 40px;
394
- margin: var(--j-press-y) 0;
395
- border: none;
396
- border-radius: var(--j-radius-lg);
397
- cursor: pointer;
398
- background-color: var(--j-red);
399
- color: var(--j-white);
400
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
401
- display: flex;
402
- align-items: center;
403
- justify-content: center;
404
- box-shadow: 0 var(--j-press-y) 0 0 var(--j-dark-red);
405
- transition: transform var(--j-press-speed) ease,
406
- box-shadow var(--j-press-speed) ease,
407
- background-color var(--j-press-speed) ease;
408
- }
409
- .j-flank__btn[data-pressed="true"] {
410
- transform: translateY(var(--j-press-y));
411
- box-shadow: none;
412
- }
413
- .j-flank__btn:disabled {
414
- background-color: var(--j-dark-red);
415
- cursor: default;
416
- box-shadow: none;
417
- }
418
-
419
-
420
- /* ── Copy Row ─────────────────────────────────────────────────────────── */
421
-
422
- .j-copy-row {
423
- display: flex;
424
- flex-direction: column;
425
- gap: var(--j-space-sm);
426
- }
427
-
428
- .j-copy-row__field {
429
- display: flex;
430
- align-items: center;
431
- gap: var(--j-space-md);
432
- }
433
-
434
- .j-copy-row__value {
435
- flex: 1;
436
- padding: 6px 10px;
437
- background: var(--j-darkest);
438
- border: 2px solid var(--j-panel-edge);
439
- border-radius: var(--j-radius-sm);
440
- word-break: break-all;
441
- }
442
-
443
- .j-copy-row__btn {
444
- font-family: var(--j-font);
445
- font-size: 11px;
446
- letter-spacing: 0.08em;
447
- border-radius: var(--j-radius-sm);
448
- padding: 4px 12px;
449
- cursor: pointer;
450
- flex-shrink: 0;
451
- transition: color 0.15s, background 0.15s, border-color 0.15s;
452
- }
453
- .j-copy-row__btn[data-copied="false"] {
454
- color: var(--j-gold-text);
455
- background: rgba(228, 182, 67, 0.12);
456
- border: 1px solid var(--j-gold-text);
457
- }
458
- .j-copy-row__btn[data-copied="true"] {
459
- color: var(--j-green-text);
460
- background: rgba(53, 189, 134, 0.12);
461
- border: 1px solid var(--j-green-text);
462
- }
463
-
464
-
465
- /* ── Code Block ───────────────────────────────────────────────────────── */
466
-
467
- .j-code-block {
468
- background-color: var(--j-darkest);
469
- border: 2px solid var(--j-panel-edge);
470
- border-radius: var(--j-radius-lg);
471
- box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
472
- overflow: hidden;
473
- display: flex;
474
- flex-direction: column;
475
- }
476
-
477
- .j-code-block__header {
478
- padding: 8px 12px;
479
- display: flex;
480
- align-items: center;
481
- justify-content: space-between;
482
- border-bottom: 1px solid var(--j-inner-border);
483
- }
484
-
485
- .j-code-block__meta {
486
- display: flex;
487
- gap: 8px;
488
- align-items: center;
489
- }
490
-
491
- .j-code-block__filename {
492
- font-size: 10px;
493
- opacity: 0.6;
494
- }
495
-
496
- .j-code-block__lang {
497
- font-size: 9px;
498
- padding: 1px 6px;
499
- border-radius: 3px;
500
- background: rgba(0, 0, 0, 0.4);
501
- color: #60a5fa;
502
- }
503
-
504
- .j-code-block__copy {
505
- padding: 4px;
506
- background: none;
507
- border: none;
508
- cursor: pointer;
509
- display: flex;
510
- }
511
- .j-code-block__copy[data-copied="false"] { color: rgba(255, 255, 255, 0.5); }
512
- .j-code-block__copy[data-copied="true"] { color: #4ade80; }
513
-
514
- .j-code-block__pre {
515
- padding: 12px;
516
- overflow-x: auto;
517
- font-family: monospace;
518
- font-size: 0.875rem;
519
- line-height: 1.6;
520
- color: #f6f0d5;
521
- margin: 0;
522
- }
523
-
524
-
525
- /* ── Filter Bar ───────────────────────────────────────────────────────── */
526
-
527
- .j-filter-bar {
528
- display: flex;
529
- gap: 24px;
530
- padding: var(--j-space-xl);
531
- background-color: var(--j-dark-grey);
532
- border: 4px solid var(--j-border-silver);
533
- box-shadow: 0 3px 0 0 var(--j-border-south);
534
- border-radius: var(--j-radius-lg);
535
- position: relative;
536
- flex-wrap: wrap;
537
- }
538
-
539
- .j-filter-bar__field {
540
- flex: 1;
541
- min-width: 200px;
542
- position: relative;
543
- margin-top: 10px;
544
- }
545
-
546
- .j-filter-bar__pill {
547
- position: absolute;
548
- top: -14px;
549
- left: 16px;
550
- background-color: var(--j-red);
551
- border: 2px solid var(--j-dark-red);
552
- border-radius: var(--j-radius-md);
553
- padding: 4px 12px;
554
- z-index: 2;
555
- }
556
-
557
- .j-filter-bar__input {
558
- width: 100%;
559
- padding: 14px 16px 14px 48px;
560
- background-color: var(--j-darkest);
561
- border: none;
562
- border-bottom: 4px solid var(--j-panel-edge);
563
- border-radius: var(--j-radius-lg);
564
- color: var(--j-white);
565
- font-family: var(--j-font);
566
- font-size: 20px;
567
- letter-spacing: 0.08em;
568
- outline: none;
569
- }
570
-
571
- .j-filter-bar__search-icon {
572
- position: absolute;
573
- left: 0;
574
- top: 0;
575
- bottom: 0;
576
- width: 48px;
577
- display: flex;
578
- align-items: center;
579
- justify-content: center;
580
- pointer-events: none;
581
- color: var(--j-blue);
582
- z-index: 1;
583
- }
584
-
585
- .j-filter-bar__select {
586
- appearance: none;
587
- -webkit-appearance: none;
588
- -moz-appearance: none;
589
- background-color: var(--j-orange);
590
- color: var(--j-white);
591
- border: none;
592
- border-bottom: 4px solid var(--j-dark-orange);
593
- border-radius: var(--j-radius-lg);
594
- cursor: pointer;
595
- font-family: var(--j-font);
596
- font-size: 18px;
597
- letter-spacing: 0.08em;
598
- padding: 14px 48px 14px 24px;
599
- min-width: 200px;
600
- text-align: center;
601
- outline: none;
602
- }
603
-
604
- .j-filter-bar__sort-icon {
605
- position: absolute;
606
- right: 16px;
607
- top: 50%;
608
- transform: translateY(-50%);
609
- pointer-events: none;
610
- color: var(--j-white);
611
- opacity: 0.85;
612
- }
613
-
614
-
615
- /* ── Modal ────────────────────────────────────────────────────────────── */
616
-
617
- .j-modal-overlay {
618
- position: fixed;
619
- inset: 0;
620
- z-index: 50;
621
- display: flex;
622
- align-items: center;
623
- justify-content: center;
624
- padding: var(--j-space-xl);
625
- background: rgba(0, 0, 0, 0.7);
626
- }
627
-
628
- .j-modal {
629
- width: 100%;
630
- max-width: 375px;
631
- max-height: 90vh;
632
- display: flex;
633
- flex-direction: column;
634
- }
635
-
636
- .j-modal__title {
637
- text-align: center;
638
- margin: 0 0 var(--j-space-xl);
639
- }
640
-
641
-
642
- /* ── Footer ───────────────────────────────────────────────────────────── */
643
-
644
- .j-footer {
645
- width: 100%;
646
- transition: opacity 200ms;
647
- }
648
- .j-footer--hidden {
649
- pointer-events: none;
650
- opacity: 0;
651
- }
652
-
653
- .j-footer__bar {
654
- width: 100%;
655
- border-top: 1px solid rgba(255, 255, 255, 0.1);
656
- background: rgba(0, 0, 0, 0.9);
657
- padding: 0 1rem 3px;
658
- text-align: center;
659
- }
660
-
661
- .j-footer__text {
662
- font-family: var(--j-font);
663
- font-size: clamp(11px, 0.8vw + 8px, 14px);
664
- display: flex;
665
- flex-wrap: wrap;
666
- align-items: center;
667
- justify-content: center;
668
- gap: 0 0.5rem;
669
- color: white;
670
- margin: 0;
671
- }
672
-
673
- .j-footer__link {
674
- color: var(--j-gold);
675
- text-decoration: none;
676
- }
677
-
678
-
679
- /* ── Floating ─────────────────────────────────────────────────────────── */
680
-
681
- .j-floating { position: absolute; z-index: 20; }
682
-
683
-
684
- /* ── Background (canvas is styled inline because it's fixed fullscreen) ── */
685
-
686
-
687
- /* ── GlowRing ─────────────────────────────────────────────────────────── */
688
-
689
- .j-glow--must {
690
- box-shadow: 0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);
691
- animation: j-glow-pulse 1.6s ease-in-out infinite;
692
- }
693
- .j-glow--should {
694
- box-shadow: 0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);
695
- animation: j-glow-pulse 1.6s ease-in-out infinite;
696
- }
697
-
698
- @keyframes j-glow-pulse {
699
- 0%, 100% { opacity: 0.55; }
700
- 50% { opacity: 1; }
701
- }
702
-
703
-
704
- /* ── Utility ──────────────────────────────────────────────────────────── */
705
-
706
- .j-flex { display: flex; }
707
- .j-flex-col { display: flex; flex-direction: column; }
708
- .j-flex-wrap { flex-wrap: wrap; }
709
- .j-items-center { align-items: center; }
710
- .j-justify-center { justify-content: center; }
711
- .j-gap-xs { gap: var(--j-space-xs); }
712
- .j-gap-sm { gap: var(--j-space-sm); }
713
- .j-gap-md { gap: var(--j-space-md); }
714
- .j-gap-lg { gap: var(--j-space-lg); }
715
- .j-gap-xl { gap: var(--j-space-xl); }
716
- .j-w-full { width: 100%; }
717
- .j-shrink-0 { flex-shrink: 0; }
718
- .j-flex-1 { flex: 1; }
719
- .j-min-w-0 { min-width: 0; }
720
- .j-text-center { text-align: center; }
721
- .j-overflow-hidden { overflow: hidden; }
722
- .j-overflow-auto { overflow: auto; }
723
- .j-relative { position: relative; }
724
-
725
-
726
- /* ── Seed Input ───────────────────────────────────────────────────────── */
727
-
728
- .j-seed-input {
729
- display: flex;
730
- flex-direction: column;
731
- gap: var(--j-space-sm);
732
- }
733
-
734
- .j-seed-input__field {
735
- width: 100%;
736
- padding: 8px 12px;
737
- border-radius: var(--j-radius-md);
738
- border: 2px solid var(--j-panel-edge);
739
- background: var(--j-darkest);
740
- color: var(--j-gold-text);
741
- font-size: 18px;
742
- font-family: var(--j-font);
743
- font-weight: 400;
744
- letter-spacing: 0.12em;
745
- text-transform: uppercase;
746
- text-shadow: var(--j-text-shadow);
747
- outline: none;
748
- transition: border-color 100ms ease;
749
- box-sizing: border-box;
750
- }
751
- .j-seed-input__field::placeholder {
752
- color: var(--j-grey);
753
- opacity: 0.6;
754
- text-transform: uppercase;
755
- letter-spacing: 0.06em;
756
- font-size: 12px;
757
- }
758
- .j-seed-input__field:focus {
759
- border-color: var(--j-gold);
760
- }
761
- .j-seed-input__field[data-valid="true"] {
762
- border-color: var(--j-green);
763
- }
764
- .j-seed-input__field[data-valid="false"] {
765
- border-color: var(--j-red);
766
- }
767
- .j-seed-input__field[data-valid="partial"] {
768
- border-color: var(--j-panel-edge);
769
- }
770
-
771
- .j-seed-input__hint {
772
- font-family: var(--j-font);
773
- font-size: 9px;
774
- letter-spacing: 0.08em;
775
- color: var(--j-grey);
776
- text-shadow: var(--j-text-shadow);
777
- }
778
-
779
-
780
- /* ── Aesthetic Selector ──────────────────────────────────────────────── */
781
-
782
- .j-aesthetic-selector {
783
- display: flex;
784
- flex-direction: column;
785
- gap: var(--j-space-sm);
786
- }
787
-
788
- .j-aesthetic-selector__list {
789
- display: flex;
790
- flex-wrap: wrap;
791
- gap: var(--j-space-sm);
792
- }
793
-
794
- .j-aesthetic-pill {
795
- padding: 4px 10px;
796
- border-radius: var(--j-radius-md);
797
- border: 2px solid var(--j-panel-edge);
798
- background: var(--j-darkest);
799
- color: var(--j-grey);
800
- cursor: pointer;
801
- font-size: 11px;
802
- font-family: var(--j-font);
803
- font-weight: 400;
804
- letter-spacing: 0.04em;
805
- text-shadow: var(--j-text-shadow);
806
- transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
807
- box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
808
- }
809
- .j-aesthetic-pill:hover {
810
- border-color: var(--j-gold);
811
- color: var(--j-gold-text);
812
- }
813
- .j-aesthetic-pill[data-active="true"] {
814
- border-color: var(--j-gold);
815
- background: rgba(228, 182, 67, 0.13);
816
- color: var(--j-gold-text);
817
- box-shadow: 0 0 0 1px var(--j-gold), 0 2px 0 0 rgba(0, 0, 0, 0.3);
818
- }
819
-
820
-
821
- /* ── Showcase ─────────────────────────────────────────────────────────── */
822
-
823
- .j-showcase {
824
- width: 100%;
825
- height: 100%;
826
- background: var(--j-darkest);
827
- display: flex;
828
- flex-direction: column;
829
- font-family: var(--j-font);
830
- color: var(--j-white);
831
- overflow: hidden;
832
- }
833
-
834
- .j-showcase__scroll {
835
- flex: 1;
836
- min-height: 0;
837
- overflow-y: auto;
838
- padding: 18px 14px 10px;
839
- }
840
-
841
- .j-showcase__wordmark {
842
- text-align: center;
843
- margin-bottom: 18px;
844
- }
845
-
846
- .j-showcase__wordmark-title {
847
- font-size: 32px;
848
- letter-spacing: 3px;
849
- line-height: 1;
850
- color: var(--j-gold-text);
851
- text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
852
- }
853
-
854
- .j-showcase__wordmark-sub {
855
- font-size: 14px;
856
- letter-spacing: 4px;
857
- color: var(--j-grey);
858
- margin-top: 4px;
859
- text-shadow: var(--j-text-shadow);
860
- }
861
-
862
- .j-showcase__stats {
863
- background: var(--j-dark-grey);
864
- border-radius: var(--j-radius-md);
865
- padding: 10px;
866
- border: 2px solid var(--j-panel-edge);
867
- box-shadow: 0 2px 0 var(--j-black);
868
- display: grid;
869
- grid-template-columns: 1fr 1fr 1fr;
870
- gap: var(--j-space-md);
871
- text-align: center;
872
- margin-bottom: var(--j-space-xl);
873
- }
874
-
875
- .j-showcase__stat-value {
876
- font-size: 16px;
877
- color: var(--j-gold-text);
878
- text-shadow: var(--j-text-shadow);
879
- }
880
-
881
- .j-showcase__stat-label {
882
- font-size: 9px;
883
- color: var(--j-grey);
884
- letter-spacing: 2px;
885
- margin-top: 2px;
886
- }
887
-
888
- .j-showcase__section-header {
889
- display: flex;
890
- align-items: center;
891
- gap: var(--j-space-md);
892
- margin-bottom: var(--j-space-md);
893
- }
894
-
895
- .j-showcase__section-tag {
896
- font-size: 11px;
897
- letter-spacing: 2px;
898
- padding: 2px 8px;
899
- color: var(--j-white);
900
- border-radius: 3px;
901
- text-shadow: var(--j-text-shadow);
902
- }
903
-
904
- .j-showcase__section-rule {
905
- flex: 1;
906
- height: 2px;
907
- border-radius: 1px;
908
- }
909
-
910
- .j-showcase__filter-list {
911
- display: flex;
912
- flex-direction: column;
913
- gap: var(--j-space-md);
914
- margin-bottom: var(--j-space-xl);
915
- }
916
-
917
- .j-showcase__filter-card {
918
- background: var(--j-dark-grey);
919
- border-radius: var(--j-radius-md);
920
- padding: 10px;
921
- box-shadow: 0 2px 0 var(--j-black);
922
- display: flex;
923
- align-items: center;
924
- gap: 10px;
925
- cursor: pointer;
926
- }
927
-
928
- .j-showcase__filter-sprites {
929
- display: flex;
930
- gap: 2px;
931
- }
932
-
933
- .j-showcase__filter-sprite {
934
- width: 30px;
935
- height: 40px;
936
- display: flex;
937
- align-items: center;
938
- justify-content: center;
939
- }
940
-
941
- .j-showcase__filter-info {
942
- flex: 1;
943
- min-width: 0;
944
- }
945
-
946
- .j-showcase__filter-name {
947
- font-size: 13px;
948
- color: var(--j-white);
949
- letter-spacing: 1px;
950
- text-shadow: var(--j-text-shadow);
951
- overflow: hidden;
952
- text-overflow: ellipsis;
953
- white-space: nowrap;
954
- }
955
-
956
- .j-showcase__filter-author {
957
- font-size: 9px;
958
- color: var(--j-gold-text);
959
- letter-spacing: 1px;
960
- margin-top: 2px;
961
- }
962
-
963
- .j-showcase__filter-hits {
964
- text-align: right;
965
- }
966
-
967
- .j-showcase__filter-hits-value {
968
- font-size: 14px;
969
- text-shadow: var(--j-text-shadow);
970
- }
971
-
972
- .j-showcase__filter-hits-label {
973
- font-size: 8px;
974
- color: var(--j-grey);
975
- letter-spacing: 1px;
976
- }
977
-
978
- .j-showcase__recent {
979
- background: var(--j-dark-grey);
980
- border-radius: var(--j-radius-md);
981
- padding: 8px 10px;
982
- border: 2px solid var(--j-panel-edge);
983
- box-shadow: 0 2px 0 var(--j-black);
984
- font-size: 11px;
985
- color: var(--j-grey);
986
- letter-spacing: 1px;
987
- line-height: 1.7;
988
- }
989
-
990
- .j-showcase__actions {
991
- padding: 8px 10px 10px;
992
- border-top: 2px solid var(--j-black);
993
- background: var(--j-dark-grey);
994
- display: flex;
995
- flex-direction: column;
996
- gap: 6px;
997
- }
998
-
999
-
1000
- /* ── Footer suit animation ────────────────────────────────────────────── */
1001
-
1002
- .j-footer__suits {
1003
- display: inline-flex;
1004
- align-items: center;
1005
- }
1006
-
1007
- .j-footer__suit-stage {
1008
- position: relative;
1009
- display: inline-block;
1010
- width: 1.5em;
1011
- height: 1em;
1012
- vertical-align: middle;
1013
- }
1014
-
1015
- .j-footer__suit-char {
1016
- position: absolute;
1017
- inset: 0;
1018
- display: inline-flex;
1019
- align-items: center;
1020
- justify-content: center;
1021
- opacity: 0;
1022
- animation-duration: 5s;
1023
- animation-delay: 0s;
1024
- animation-iteration-count: infinite;
1025
- animation-timing-function: ease-out;
1026
- }
1027
-
1028
-
1029
- /* ── Copy row label ───────────────────────────────────────────────────── */
1030
-
1031
- .j-copy-row__label {
1032
- letter-spacing: 2px;
1033
- }
1034
-
1035
-
1036
- /* ── Motely version badge ─────────────────────────────────────────────── */
1037
-
1038
- .j-motely-badge {
1039
- display: inline-flex;
1040
- align-items: center;
1041
- gap: 6px;
1042
- }
1043
-
1044
- .j-motely-badge--chip {
1045
- padding: 3px 8px;
1046
- border-radius: var(--j-radius-sm);
1047
- background: var(--j-darkest);
1048
- border: 1px solid var(--j-panel-edge);
1049
- }
1050
-
1051
- /* ── Font Dance Animation ─────────────────────────────────────────────── */
1052
-
1053
- @keyframes j-font-dance {
1054
- 0% { transform: translateY(0); }
1055
- 25% { transform: translateY(-1px); }
1056
- 50% { transform: translateY(0); }
1057
- 75% { transform: translateY(1px); }
1058
- 100% { transform: translateY(0); }
1059
- }
1060
-
1061
- .j-text--dance-container {
1062
- display: inline-flex;
1063
- }
1064
-
1065
- .j-font-dance-char {
1066
- display: inline-block;
1067
- animation: j-font-dance 3s infinite ease-in-out;
1068
- }
1069
-
1070
- .hide-scrollbar {
1071
- scrollbar-width: none;
1072
- -ms-overflow-style: none;
1073
- }
1074
- .hide-scrollbar::-webkit-scrollbar {
1075
- display: none;
1076
- }
1077
- .j-juice-hover { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .j-juice-hover:hover { transform: scale(1.05) translateY(-2px); z-index: 5; }
1078
- .hide-scrollbar
1079
- -ms-overflow-style: none; scrollbar-width: none;
1080
- .hide-scrollbar::-webkit-scrollbar
1081
- display: none;
1082
-
1083
- .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
1084
- .hide-scrollbar::-webkit-scrollbar { display: none; }
1085
- .j-juice-hover { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
1086
- .j-juice-hover:hover { transform: scale(1.05) translateY(-2px); z-index: 5; }
1
+ /* ═══════════════════════════════════════════════════════════════════════════
2
+ jimbo.css — Jimbo Design System
3
+ Balatro-inspired design tokens + component classes.
4
+ Eyedropped from actual game shader output — not Lua hex values.
5
+ ═══════════════════════════════════════════════════════════════════════════ */
6
+
7
+ /* Global Scrollbar Hide */
8
+ * {
9
+ scrollbar-width: none !important;
10
+ -ms-overflow-style: none !important;
11
+ }
12
+ *::-webkit-scrollbar {
13
+ display: none !important;
14
+ }
15
+
16
+ /* ── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
17
+
18
+ :root {
19
+ /* Colors — eyedropped from Balatro's rendered shader output */
20
+ --j-red: #ff4c40;
21
+ --j-blue: #0093ff;
22
+ --j-green: #429f79;
23
+ --j-orange: #ff9800;
24
+ --j-gold: #e4b643;
25
+ --j-purple: #9e74ce;
26
+
27
+ --j-dark-red: #a02721;
28
+ --j-dark-blue: #0057a1;
29
+ --j-dark-orange: #a05b00;
30
+ --j-dark-green: #215f46;
31
+ --j-dark-purple: #5e437e;
32
+
33
+ --j-dark-grey: #3a5055;
34
+ --j-darkest: #1e2b2d;
35
+ --j-grey: #708386;
36
+ --j-teal-grey: #404c4e;
37
+
38
+ --j-panel-edge: #1e2e32;
39
+ --j-inner-border: #334461;
40
+ --j-border-silver: #b9c2d2;
41
+ --j-border-south: #777e89;
42
+
43
+ --j-gold-text: #e4b643;
44
+ --j-green-text: #35bd86;
45
+ --j-orange-text: #ff8f00;
46
+ --j-white: #ffffff;
47
+ --j-black: #000000;
48
+
49
+ --j-tarot-btn: #9e74ce;
50
+ --j-planet-btn: #00a7ca;
51
+ --j-spectral-btn: #2e76fd;
52
+ --j-tarot-btn-dark: #5e437e;
53
+ --j-planet-btn-dark: #00657c;
54
+ --j-spectral-btn-dark: #14449e;
55
+
56
+ /* Typography */
57
+ --j-font: 'm6x11plus', 'Courier New', monospace;
58
+ --j-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
59
+
60
+ /* Spacing */
61
+ --j-space-xs: 2px;
62
+ --j-space-sm: 4px;
63
+ --j-space-md: 8px;
64
+ --j-space-lg: 12px;
65
+ --j-space-xl: 16px;
66
+
67
+ /* Radii — Balatro is chunky, not bubbly. Never > 10px. */
68
+ --j-radius-sm: 4px;
69
+ --j-radius-md: 6px;
70
+ --j-radius-lg: 8px;
71
+ --j-radius-pill: 10px;
72
+
73
+ /* Animation */
74
+ --j-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
75
+ --j-press-y: 3px;
76
+ --j-press-speed: 55ms;
77
+ }
78
+
79
+
80
+ /* ── Base Text ─────────────────────────────────────────────────────────── */
81
+
82
+ .j-text {
83
+ font-family: var(--j-font);
84
+ font-weight: 400;
85
+ line-height: 1.2;
86
+ text-shadow: var(--j-text-shadow);
87
+ color: var(--j-white);
88
+ }
89
+ .j-text--no-shadow { text-shadow: none; }
90
+ .j-text--upper {
91
+ text-transform: uppercase;
92
+ letter-spacing: 0.08em;
93
+ }
94
+
95
+ /* Font Dance Animation */
96
+ .j-text--dance-container {
97
+ display: inline-block;
98
+ white-space: pre-wrap;
99
+ }
100
+
101
+ .j-font-dance-char {
102
+ display: inline-block;
103
+ animation: j-font-dance 1.5s infinite steps(2, end);
104
+ }
105
+
106
+ @keyframes j-font-dance {
107
+ 0%, 100% { transform: translate(0, 0); }
108
+ 25% { transform: translate(1px, -1px); }
109
+ 50% { transform: translate(0, -2px); }
110
+ 75% { transform: translate(-1px, -1px); }
111
+ }
112
+
113
+ /* Sizes (from DESIGN.md typography scale) */
114
+ .j-text--display { font-size: 26px; letter-spacing: 0.04em; line-height: 1; }
115
+ .j-text--xl { font-size: 24px; letter-spacing: 0.04em; }
116
+ .j-text--lg { font-size: 18px; letter-spacing: 0.04em; }
117
+ .j-text--heading { font-size: 14px; letter-spacing: 0.08em; line-height: 1.2; }
118
+ .j-text--md { font-size: 14px; }
119
+ .j-text--sm { font-size: 12px; }
120
+ .j-text--body { font-size: 11px; letter-spacing: 0.05em; line-height: 1.3; }
121
+ .j-text--xs { font-size: 10px; }
122
+ .j-text--label { font-size: 9px; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; }
123
+ .j-text--micro { font-size: 8px; letter-spacing: 0.08em; line-height: 1; }
124
+
125
+ /* Tones */
126
+ .j-text--default { color: var(--j-white); }
127
+ .j-text--mult,
128
+ .j-text--red { color: var(--j-red); }
129
+ .j-text--chips,
130
+ .j-text--blue { color: var(--j-blue); }
131
+ .j-text--gold { color: var(--j-gold-text); }
132
+ .j-text--green { color: var(--j-green-text); }
133
+ .j-text--orange { color: var(--j-orange-text); }
134
+ .j-text--purple { color: var(--j-purple); }
135
+ .j-text--grey { color: var(--j-grey); }
136
+
137
+
138
+ /* ── Panel ─────────────────────────────────────────────────────────────── */
139
+
140
+ .j-panel {
141
+ background-color: var(--j-dark-grey);
142
+ border: 2px solid var(--j-border-silver);
143
+ border-bottom-color: var(--j-border-south);
144
+ border-radius: var(--j-radius-md);
145
+ box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55),
146
+ inset 0 0 0 1px rgba(255, 255, 255, 0.04);
147
+ padding: var(--j-space-lg);
148
+ display: flex;
149
+ flex-direction: column;
150
+ align-items: stretch;
151
+ overflow: visible;
152
+ position: relative;
153
+ }
154
+
155
+ .j-panel__body {
156
+ flex: 1;
157
+ overflow: auto;
158
+ }
159
+
160
+ .j-panel__back {
161
+ margin-top: var(--j-space-lg);
162
+ padding-top: var(--j-space-md);
163
+ flex-shrink: 0;
164
+ }
165
+
166
+ .j-inner-panel {
167
+ background-color: var(--j-inner-border);
168
+ border: 2px solid var(--j-panel-edge);
169
+ border-radius: var(--j-radius-md);
170
+ padding: var(--j-space-lg);
171
+ }
172
+
173
+
174
+ /* ── Button ────────────────────────────────────────────────────────────── */
175
+ /* Chunky 3D press: colored underside via offset shadow div,
176
+ press sinks the face +3px and collapses the shadow. */
177
+
178
+ .j-btn {
179
+ display: inline-block;
180
+ position: relative;
181
+ cursor: pointer;
182
+ -webkit-user-select: none;
183
+ user-select: none;
184
+ }
185
+ .j-btn--full { width: 100%; }
186
+ .j-btn--disabled {
187
+ opacity: 0.55;
188
+ cursor: not-allowed;
189
+ }
190
+
191
+ .j-btn__shadow {
192
+ position: absolute;
193
+ left: 1px;
194
+ top: 3px;
195
+ right: -1px;
196
+ bottom: -3px;
197
+ border-radius: var(--j-radius-md);
198
+ background: var(--j-btn-shadow-color, var(--j-dark-orange));
199
+ transition: opacity var(--j-press-speed) linear;
200
+ }
201
+ .j-btn[data-pressed="true"] .j-btn__shadow { opacity: 0; }
202
+
203
+ .j-btn__face {
204
+ position: relative;
205
+ border-radius: var(--j-radius-md);
206
+ background: var(--j-btn-face-color, var(--j-orange));
207
+ text-align: center;
208
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
209
+ transform: translate(0, 0);
210
+ transition: transform var(--j-press-speed) linear;
211
+ }
212
+ .j-btn[data-pressed="true"] .j-btn__face {
213
+ transform: translate(1px, 3px);
214
+ }
215
+
216
+ /* Sizes */
217
+ .j-btn--xs .j-btn__face { padding: 2px 8px; }
218
+ .j-btn--sm .j-btn__face { padding: 4px 10px; }
219
+ .j-btn--md .j-btn__face { padding: 6px 14px; }
220
+ .j-btn--lg .j-btn__face { padding: 10px 18px; }
221
+
222
+ /* Tone colors — set via CSS custom properties */
223
+ .j-btn--orange { --j-btn-face-color: var(--j-orange); --j-btn-shadow-color: var(--j-dark-orange); }
224
+ .j-btn--red { --j-btn-face-color: var(--j-red); --j-btn-shadow-color: var(--j-dark-red); }
225
+ .j-btn--blue { --j-btn-face-color: var(--j-blue); --j-btn-shadow-color: var(--j-dark-blue); }
226
+ .j-btn--green { --j-btn-face-color: var(--j-green); --j-btn-shadow-color: var(--j-dark-green); }
227
+
228
+
229
+ /* ── Badge ─────────────────────────────────────────────────────────────── */
230
+
231
+ .j-badge {
232
+ display: inline-flex;
233
+ align-items: center;
234
+ border-radius: var(--j-radius-sm);
235
+ font-family: var(--j-font);
236
+ font-weight: 400;
237
+ letter-spacing: 0.04em;
238
+ white-space: nowrap;
239
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
240
+ border: none;
241
+ }
242
+ .j-badge--sm { padding: 2px 6px; font-size: 10px; }
243
+ .j-badge--md { padding: 4px 8px; font-size: 12px; }
244
+
245
+ /* Badge tones — dark-colored bottom edge, no thin pixel borders */
246
+ .j-badge--dark { background: var(--j-darkest); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-panel-edge); }
247
+ .j-badge--blue { background: var(--j-blue); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-blue); }
248
+ .j-badge--red { background: var(--j-red); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-red); }
249
+ .j-badge--green { background: var(--j-green); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-green); }
250
+ .j-badge--orange { background: var(--j-orange); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-orange); }
251
+ .j-badge--purple { background: var(--j-purple); color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-purple); }
252
+
253
+
254
+ /* ── Tabs ──────────────────────────────────────────────────────────────── */
255
+
256
+ .j-tabs {
257
+ display: flex;
258
+ gap: var(--j-space-md);
259
+ align-items: flex-end;
260
+ flex-wrap: wrap;
261
+ }
262
+
263
+ .j-tab {
264
+ display: flex;
265
+ flex-direction: column;
266
+ align-items: center;
267
+ position: relative;
268
+ }
269
+
270
+ .j-tab__indicator {
271
+ margin-bottom: var(--j-space-sm);
272
+ }
273
+ .j-tab__indicator[data-active="true"] {
274
+ animation: jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite;
275
+ }
276
+ .j-tab__indicator[data-active="false"] {
277
+ visibility: hidden;
278
+ }
279
+
280
+ .j-tab__btn {
281
+ border: none;
282
+ cursor: pointer;
283
+ border-radius: var(--j-radius-lg);
284
+ padding: 4px 12px;
285
+ background-color: var(--j-red);
286
+ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
287
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
288
+ transition: none;
289
+ }
290
+ .j-tab__btn:hover,
291
+ .j-tab__btn:active {
292
+ background-color: var(--j-dark-red);
293
+ }
294
+ .j-tab__btn[data-pressed="true"] {
295
+ transform: translateY(2px);
296
+ box-shadow: none;
297
+ }
298
+
299
+ @keyframes jimbo-bounce {
300
+ 0%, 100% { transform: translateY(0); }
301
+ 50% { transform: translateY(-3px); }
302
+ }
303
+
304
+ /* Vertical tabs */
305
+ .j-vtabs {
306
+ display: flex;
307
+ flex-direction: column;
308
+ gap: var(--j-space-sm);
309
+ }
310
+
311
+ .j-vtab {
312
+ border: none;
313
+ cursor: pointer;
314
+ border-radius: 8px 0 0 8px;
315
+ padding: 16px 8px;
316
+ background-color: var(--j-red);
317
+ writing-mode: vertical-rl;
318
+ text-orientation: mixed;
319
+ transform: rotate(180deg);
320
+ transition: none;
321
+ }
322
+
323
+
324
+ /* ── Toggle List ──────────────────────────────────────────────────────── */
325
+
326
+ .j-toggle-list {
327
+ display: flex;
328
+ flex-direction: column;
329
+ gap: var(--j-space-sm);
330
+ }
331
+
332
+ .j-toggle-list__title {
333
+ font-family: var(--j-font);
334
+ font-size: 12px;
335
+ color: var(--j-grey);
336
+ text-transform: uppercase;
337
+ letter-spacing: 0.04em;
338
+ margin-bottom: var(--j-space-sm);
339
+ }
340
+
341
+ .j-toggle-item {
342
+ display: flex;
343
+ align-items: center;
344
+ gap: var(--j-space-md);
345
+ padding: 6px 8px;
346
+ background: rgba(255, 255, 255, 0.05);
347
+ border: 1px solid rgba(0, 0, 0, 0.2);
348
+ border-radius: var(--j-radius-sm);
349
+ cursor: pointer;
350
+ font-family: var(--j-font);
351
+ color: var(--j-white);
352
+ text-transform: uppercase;
353
+ letter-spacing: 0.04em;
354
+ text-align: left;
355
+ justify-content: flex-start;
356
+ }
357
+
358
+ .j-toggle-check {
359
+ width: 10px;
360
+ height: 10px;
361
+ flex-shrink: 0;
362
+ border: 1px solid var(--j-dark-grey);
363
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
364
+ }
365
+ .j-toggle-check[data-on="true"] { background: var(--j-orange); }
366
+ .j-toggle-check[data-on="false"] { background: var(--j-darkest); }
367
+
368
+
369
+ /* ── Tooltip ──────────────────────────────────────────────────────────── */
370
+
371
+ .j-tooltip {
372
+ position: fixed;
373
+ max-width: 280px;
374
+ padding: 6px 10px;
375
+ border-radius: var(--j-radius-md);
376
+ background: var(--j-darkest);
377
+ border: 2px solid var(--j-border-silver);
378
+ box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
379
+ color: var(--j-white);
380
+ pointer-events: none;
381
+ z-index: 10000;
382
+ transition: opacity 120ms ease;
383
+ }
384
+
385
+
386
+ /* ── Flank Nav ────────────────────────────────────────────────────────── */
387
+
388
+ .j-flank {
389
+ display: flex;
390
+ align-items: stretch;
391
+ justify-content: center;
392
+ gap: var(--j-space-md);
393
+ width: 100%;
394
+ position: relative;
395
+ }
396
+
397
+ .j-flank__content {
398
+ position: relative;
399
+ flex: 1;
400
+ min-width: 0;
401
+ display: flex;
402
+ flex-direction: column;
403
+ }
404
+
405
+ .j-flank__btn {
406
+ flex-shrink: 0;
407
+ width: 40px;
408
+ margin: var(--j-press-y) 0;
409
+ border: none;
410
+ border-radius: var(--j-radius-lg);
411
+ cursor: pointer;
412
+ background-color: var(--j-red);
413
+ color: var(--j-white);
414
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
415
+ display: flex;
416
+ align-items: center;
417
+ justify-content: center;
418
+ box-shadow: 0 var(--j-press-y) 0 0 var(--j-dark-red);
419
+ transition: transform var(--j-press-speed) ease,
420
+ box-shadow var(--j-press-speed) ease,
421
+ background-color var(--j-press-speed) ease;
422
+ }
423
+ .j-flank__btn[data-pressed="true"] {
424
+ transform: translateY(var(--j-press-y));
425
+ box-shadow: none;
426
+ }
427
+ .j-flank__btn:disabled {
428
+ background-color: var(--j-dark-red);
429
+ cursor: default;
430
+ box-shadow: none;
431
+ }
432
+
433
+
434
+ /* ── Copy Row ─────────────────────────────────────────────────────────── */
435
+
436
+ .j-copy-row {
437
+ display: flex;
438
+ flex-direction: column;
439
+ gap: var(--j-space-sm);
440
+ }
441
+
442
+ .j-copy-row__field {
443
+ display: flex;
444
+ align-items: center;
445
+ gap: var(--j-space-md);
446
+ }
447
+
448
+ .j-copy-row__value {
449
+ flex: 1;
450
+ padding: 6px 10px;
451
+ background: var(--j-darkest);
452
+ border: 2px solid var(--j-panel-edge);
453
+ border-radius: var(--j-radius-sm);
454
+ word-break: break-all;
455
+ }
456
+
457
+ .j-copy-row__btn {
458
+ font-family: var(--j-font);
459
+ font-size: 11px;
460
+ letter-spacing: 0.08em;
461
+ border-radius: var(--j-radius-sm);
462
+ padding: 4px 12px;
463
+ cursor: pointer;
464
+ flex-shrink: 0;
465
+ transition: color 0.15s, background 0.15s, border-color 0.15s;
466
+ }
467
+ .j-copy-row__btn[data-copied="false"] {
468
+ color: var(--j-gold-text);
469
+ background: rgba(228, 182, 67, 0.12);
470
+ border: 1px solid var(--j-gold-text);
471
+ }
472
+ .j-copy-row__btn[data-copied="true"] {
473
+ color: var(--j-green-text);
474
+ background: rgba(53, 189, 134, 0.12);
475
+ border: 1px solid var(--j-green-text);
476
+ }
477
+
478
+
479
+ /* ── Code Block ───────────────────────────────────────────────────────── */
480
+
481
+ .j-code-block {
482
+ background-color: var(--j-darkest);
483
+ border: 2px solid var(--j-panel-edge);
484
+ border-radius: var(--j-radius-lg);
485
+ box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
486
+ overflow: hidden;
487
+ display: flex;
488
+ flex-direction: column;
489
+ }
490
+
491
+ .j-code-block__header {
492
+ padding: 8px 12px;
493
+ display: flex;
494
+ align-items: center;
495
+ justify-content: space-between;
496
+ border-bottom: 1px solid var(--j-inner-border);
497
+ }
498
+
499
+ .j-code-block__meta {
500
+ display: flex;
501
+ gap: 8px;
502
+ align-items: center;
503
+ }
504
+
505
+ .j-code-block__filename {
506
+ font-size: 10px;
507
+ opacity: 0.6;
508
+ }
509
+
510
+ .j-code-block__lang {
511
+ font-size: 9px;
512
+ padding: 1px 6px;
513
+ border-radius: 3px;
514
+ background: rgba(0, 0, 0, 0.4);
515
+ color: #60a5fa;
516
+ }
517
+
518
+ .j-code-block__copy {
519
+ padding: 4px;
520
+ background: none;
521
+ border: none;
522
+ cursor: pointer;
523
+ display: flex;
524
+ }
525
+ .j-code-block__copy[data-copied="false"] { color: rgba(255, 255, 255, 0.5); }
526
+ .j-code-block__copy[data-copied="true"] { color: #4ade80; }
527
+
528
+ .j-code-block__pre {
529
+ padding: 12px;
530
+ overflow-x: auto;
531
+ font-family: monospace;
532
+ font-size: 0.875rem;
533
+ line-height: 1.6;
534
+ color: #f6f0d5;
535
+ margin: 0;
536
+ }
537
+
538
+
539
+ /* ── Filter Bar ───────────────────────────────────────────────────────── */
540
+
541
+ .j-filter-bar {
542
+ display: flex;
543
+ gap: 24px;
544
+ padding: var(--j-space-xl);
545
+ background-color: var(--j-dark-grey);
546
+ border: 4px solid var(--j-border-silver);
547
+ box-shadow: 0 3px 0 0 var(--j-border-south);
548
+ border-radius: var(--j-radius-lg);
549
+ position: relative;
550
+ flex-wrap: wrap;
551
+ }
552
+
553
+ .j-filter-bar__field {
554
+ flex: 1;
555
+ min-width: 200px;
556
+ position: relative;
557
+ margin-top: 10px;
558
+ }
559
+
560
+ .j-filter-bar__pill {
561
+ position: absolute;
562
+ top: -14px;
563
+ left: 16px;
564
+ background-color: var(--j-red);
565
+ border: 2px solid var(--j-dark-red);
566
+ border-radius: var(--j-radius-md);
567
+ padding: 4px 12px;
568
+ z-index: 2;
569
+ }
570
+
571
+ .j-filter-bar__input {
572
+ width: 100%;
573
+ padding: 14px 16px 14px 48px;
574
+ background-color: var(--j-darkest);
575
+ border: none;
576
+ border-bottom: 4px solid var(--j-panel-edge);
577
+ border-radius: var(--j-radius-lg);
578
+ color: var(--j-white);
579
+ font-family: var(--j-font);
580
+ font-size: 20px;
581
+ letter-spacing: 0.08em;
582
+ outline: none;
583
+ }
584
+
585
+ .j-filter-bar__search-icon {
586
+ position: absolute;
587
+ left: 0;
588
+ top: 0;
589
+ bottom: 0;
590
+ width: 48px;
591
+ display: flex;
592
+ align-items: center;
593
+ justify-content: center;
594
+ pointer-events: none;
595
+ color: var(--j-blue);
596
+ z-index: 1;
597
+ }
598
+
599
+ .j-filter-bar__select {
600
+ appearance: none;
601
+ -webkit-appearance: none;
602
+ -moz-appearance: none;
603
+ background-color: var(--j-orange);
604
+ color: var(--j-white);
605
+ border: none;
606
+ border-bottom: 4px solid var(--j-dark-orange);
607
+ border-radius: var(--j-radius-lg);
608
+ cursor: pointer;
609
+ font-family: var(--j-font);
610
+ font-size: 18px;
611
+ letter-spacing: 0.08em;
612
+ padding: 14px 48px 14px 24px;
613
+ min-width: 200px;
614
+ text-align: center;
615
+ outline: none;
616
+ }
617
+
618
+ .j-filter-bar__sort-icon {
619
+ position: absolute;
620
+ right: 16px;
621
+ top: 50%;
622
+ transform: translateY(-50%);
623
+ pointer-events: none;
624
+ color: var(--j-white);
625
+ opacity: 0.85;
626
+ }
627
+
628
+
629
+ /* ── Modal ────────────────────────────────────────────────────────────── */
630
+
631
+ .j-modal-overlay {
632
+ position: fixed;
633
+ inset: 0;
634
+ z-index: 50;
635
+ display: flex;
636
+ align-items: center;
637
+ justify-content: center;
638
+ padding: var(--j-space-xl);
639
+ background: rgba(0, 0, 0, 0.7);
640
+ }
641
+
642
+ .j-modal {
643
+ width: 100%;
644
+ max-width: 375px;
645
+ max-height: 90vh;
646
+ display: flex;
647
+ flex-direction: column;
648
+ }
649
+
650
+ .j-modal__title {
651
+ text-align: center;
652
+ margin: 0 0 var(--j-space-xl);
653
+ }
654
+
655
+
656
+ /* ── Footer ───────────────────────────────────────────────────────────── */
657
+
658
+ .j-footer {
659
+ width: 100%;
660
+ transition: opacity 200ms;
661
+ }
662
+ .j-footer--hidden {
663
+ pointer-events: none;
664
+ opacity: 0;
665
+ }
666
+
667
+ .j-footer__bar {
668
+ width: 100%;
669
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
670
+ background: rgba(0, 0, 0, 0.9);
671
+ padding: 0 1rem 3px;
672
+ text-align: center;
673
+ }
674
+
675
+ .j-footer__text {
676
+ font-family: var(--j-font);
677
+ font-size: clamp(11px, 0.8vw + 8px, 14px);
678
+ display: flex;
679
+ flex-wrap: wrap;
680
+ align-items: center;
681
+ justify-content: center;
682
+ gap: 0 0.5rem;
683
+ color: white;
684
+ margin: 0;
685
+ }
686
+
687
+ .j-footer__link {
688
+ color: var(--j-gold);
689
+ text-decoration: none;
690
+ }
691
+
692
+
693
+ /* ── Floating ─────────────────────────────────────────────────────────── */
694
+
695
+ .j-floating { position: absolute; z-index: 20; }
696
+
697
+
698
+ /* ── Background (canvas is styled inline because it's fixed fullscreen) ── */
699
+
700
+
701
+ /* ── GlowRing ─────────────────────────────────────────────────────────── */
702
+
703
+ .j-glow--must {
704
+ box-shadow: 0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);
705
+ animation: j-glow-pulse 1.6s ease-in-out infinite;
706
+ }
707
+ .j-glow--should {
708
+ box-shadow: 0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);
709
+ animation: j-glow-pulse 1.6s ease-in-out infinite;
710
+ }
711
+
712
+ @keyframes j-glow-pulse {
713
+ 0%, 100% { opacity: 0.55; }
714
+ 50% { opacity: 1; }
715
+ }
716
+
717
+
718
+ /* ── Utility ──────────────────────────────────────────────────────────── */
719
+
720
+ .j-flex { display: flex; }
721
+ .j-flex-col { display: flex; flex-direction: column; }
722
+ .j-flex-wrap { flex-wrap: wrap; }
723
+ .j-items-center { align-items: center; }
724
+ .j-justify-center { justify-content: center; }
725
+ .j-gap-xs { gap: var(--j-space-xs); }
726
+ .j-gap-sm { gap: var(--j-space-sm); }
727
+ .j-gap-md { gap: var(--j-space-md); }
728
+ .j-gap-lg { gap: var(--j-space-lg); }
729
+ .j-gap-xl { gap: var(--j-space-xl); }
730
+ .j-w-full { width: 100%; }
731
+ .j-shrink-0 { flex-shrink: 0; }
732
+ .j-flex-1 { flex: 1; }
733
+ .j-min-w-0 { min-width: 0; }
734
+ .j-text-center { text-align: center; }
735
+ .j-overflow-hidden { overflow: hidden; }
736
+ .j-overflow-auto { overflow: auto; }
737
+ .j-relative { position: relative; }
738
+
739
+
740
+ /* ── Seed Input ───────────────────────────────────────────────────────── */
741
+
742
+ .j-seed-input {
743
+ display: flex;
744
+ flex-direction: column;
745
+ gap: var(--j-space-sm);
746
+ }
747
+
748
+ .j-seed-input__field {
749
+ width: 100%;
750
+ padding: 8px 12px;
751
+ border-radius: var(--j-radius-md);
752
+ border: 2px solid var(--j-panel-edge);
753
+ background: var(--j-darkest);
754
+ color: var(--j-gold-text);
755
+ font-size: 18px;
756
+ font-family: var(--j-font);
757
+ font-weight: 400;
758
+ letter-spacing: 0.12em;
759
+ text-transform: uppercase;
760
+ text-shadow: var(--j-text-shadow);
761
+ outline: none;
762
+ transition: border-color 100ms ease;
763
+ box-sizing: border-box;
764
+ }
765
+ .j-seed-input__field::placeholder {
766
+ color: var(--j-grey);
767
+ opacity: 0.6;
768
+ text-transform: uppercase;
769
+ letter-spacing: 0.06em;
770
+ font-size: 12px;
771
+ }
772
+ .j-seed-input__field:focus {
773
+ border-color: var(--j-gold);
774
+ }
775
+ .j-seed-input__field[data-valid="true"] {
776
+ border-color: var(--j-green);
777
+ }
778
+ .j-seed-input__field[data-valid="false"] {
779
+ border-color: var(--j-red);
780
+ }
781
+ .j-seed-input__field[data-valid="partial"] {
782
+ border-color: var(--j-panel-edge);
783
+ }
784
+
785
+ .j-seed-input__hint {
786
+ font-family: var(--j-font);
787
+ font-size: 9px;
788
+ letter-spacing: 0.08em;
789
+ color: var(--j-grey);
790
+ text-shadow: var(--j-text-shadow);
791
+ }
792
+
793
+
794
+ /* ── Aesthetic Selector ──────────────────────────────────────────────── */
795
+
796
+ .j-aesthetic-selector {
797
+ display: flex;
798
+ flex-direction: column;
799
+ gap: var(--j-space-sm);
800
+ }
801
+
802
+ .j-aesthetic-selector__list {
803
+ display: flex;
804
+ flex-wrap: wrap;
805
+ gap: var(--j-space-sm);
806
+ }
807
+
808
+ .j-aesthetic-pill {
809
+ padding: 4px 10px;
810
+ border-radius: var(--j-radius-md);
811
+ border: 2px solid var(--j-panel-edge);
812
+ background: var(--j-darkest);
813
+ color: var(--j-grey);
814
+ cursor: pointer;
815
+ font-size: 11px;
816
+ font-family: var(--j-font);
817
+ font-weight: 400;
818
+ letter-spacing: 0.04em;
819
+ text-shadow: var(--j-text-shadow);
820
+ transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
821
+ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
822
+ }
823
+ .j-aesthetic-pill:hover {
824
+ border-color: var(--j-gold);
825
+ color: var(--j-gold-text);
826
+ }
827
+ .j-aesthetic-pill[data-active="true"] {
828
+ border-color: var(--j-gold);
829
+ background: rgba(228, 182, 67, 0.13);
830
+ color: var(--j-gold-text);
831
+ box-shadow: 0 0 0 1px var(--j-gold), 0 2px 0 0 rgba(0, 0, 0, 0.3);
832
+ }
833
+
834
+
835
+ /* ── Showcase ─────────────────────────────────────────────────────────── */
836
+
837
+ .j-showcase {
838
+ width: 100%;
839
+ height: 100%;
840
+ background: var(--j-darkest);
841
+ display: flex;
842
+ flex-direction: column;
843
+ font-family: var(--j-font);
844
+ color: var(--j-white);
845
+ overflow: hidden;
846
+ }
847
+
848
+ .j-showcase__scroll {
849
+ flex: 1;
850
+ min-height: 0;
851
+ overflow-y: auto;
852
+ padding: 18px 14px 10px;
853
+ }
854
+
855
+ .j-showcase__wordmark {
856
+ text-align: center;
857
+ margin-bottom: 18px;
858
+ }
859
+
860
+ .j-showcase__wordmark-title {
861
+ font-size: 32px;
862
+ letter-spacing: 3px;
863
+ line-height: 1;
864
+ color: var(--j-gold-text);
865
+ text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
866
+ }
867
+
868
+ .j-showcase__wordmark-sub {
869
+ font-size: 14px;
870
+ letter-spacing: 4px;
871
+ color: var(--j-grey);
872
+ margin-top: 4px;
873
+ text-shadow: var(--j-text-shadow);
874
+ }
875
+
876
+ .j-showcase__stats {
877
+ background: var(--j-dark-grey);
878
+ border-radius: var(--j-radius-md);
879
+ padding: 10px;
880
+ border: 2px solid var(--j-panel-edge);
881
+ box-shadow: 0 2px 0 var(--j-black);
882
+ display: grid;
883
+ grid-template-columns: 1fr 1fr 1fr;
884
+ gap: var(--j-space-md);
885
+ text-align: center;
886
+ margin-bottom: var(--j-space-xl);
887
+ }
888
+
889
+ .j-showcase__stat-value {
890
+ font-size: 16px;
891
+ color: var(--j-gold-text);
892
+ text-shadow: var(--j-text-shadow);
893
+ }
894
+
895
+ .j-showcase__stat-label {
896
+ font-size: 9px;
897
+ color: var(--j-grey);
898
+ letter-spacing: 2px;
899
+ margin-top: 2px;
900
+ }
901
+
902
+ .j-showcase__section-header {
903
+ display: flex;
904
+ align-items: center;
905
+ gap: var(--j-space-md);
906
+ margin-bottom: var(--j-space-md);
907
+ }
908
+
909
+ .j-showcase__section-tag {
910
+ font-size: 11px;
911
+ letter-spacing: 2px;
912
+ padding: 2px 8px;
913
+ color: var(--j-white);
914
+ border-radius: 3px;
915
+ text-shadow: var(--j-text-shadow);
916
+ }
917
+
918
+ .j-showcase__section-rule {
919
+ flex: 1;
920
+ height: 2px;
921
+ border-radius: 1px;
922
+ }
923
+
924
+ .j-showcase__filter-list {
925
+ display: flex;
926
+ flex-direction: column;
927
+ gap: var(--j-space-md);
928
+ margin-bottom: var(--j-space-xl);
929
+ }
930
+
931
+ .j-showcase__filter-card {
932
+ background: var(--j-dark-grey);
933
+ border-radius: var(--j-radius-md);
934
+ padding: 10px;
935
+ box-shadow: 0 2px 0 var(--j-black);
936
+ display: flex;
937
+ align-items: center;
938
+ gap: 10px;
939
+ cursor: pointer;
940
+ }
941
+
942
+ .j-showcase__filter-sprites {
943
+ display: flex;
944
+ gap: 2px;
945
+ }
946
+
947
+ .j-showcase__filter-sprite {
948
+ width: 30px;
949
+ height: 40px;
950
+ display: flex;
951
+ align-items: center;
952
+ justify-content: center;
953
+ }
954
+
955
+ .j-showcase__filter-info {
956
+ flex: 1;
957
+ min-width: 0;
958
+ }
959
+
960
+ .j-showcase__filter-name {
961
+ font-size: 13px;
962
+ color: var(--j-white);
963
+ letter-spacing: 1px;
964
+ text-shadow: var(--j-text-shadow);
965
+ overflow: hidden;
966
+ text-overflow: ellipsis;
967
+ white-space: nowrap;
968
+ }
969
+
970
+ .j-showcase__filter-author {
971
+ font-size: 9px;
972
+ color: var(--j-gold-text);
973
+ letter-spacing: 1px;
974
+ margin-top: 2px;
975
+ }
976
+
977
+ .j-showcase__filter-hits {
978
+ text-align: right;
979
+ }
980
+
981
+ .j-showcase__filter-hits-value {
982
+ font-size: 14px;
983
+ text-shadow: var(--j-text-shadow);
984
+ }
985
+
986
+ .j-showcase__filter-hits-label {
987
+ font-size: 8px;
988
+ color: var(--j-grey);
989
+ letter-spacing: 1px;
990
+ }
991
+
992
+ .j-showcase__recent {
993
+ background: var(--j-dark-grey);
994
+ border-radius: var(--j-radius-md);
995
+ padding: 8px 10px;
996
+ border: 2px solid var(--j-panel-edge);
997
+ box-shadow: 0 2px 0 var(--j-black);
998
+ font-size: 11px;
999
+ color: var(--j-grey);
1000
+ letter-spacing: 1px;
1001
+ line-height: 1.7;
1002
+ }
1003
+
1004
+ .j-showcase__actions {
1005
+ padding: 8px 10px 10px;
1006
+ border-top: 2px solid var(--j-black);
1007
+ background: var(--j-dark-grey);
1008
+ display: flex;
1009
+ flex-direction: column;
1010
+ gap: 6px;
1011
+ }
1012
+
1013
+
1014
+ /* ── Footer suit animation ────────────────────────────────────────────── */
1015
+
1016
+ .j-footer__suits {
1017
+ display: inline-flex;
1018
+ align-items: center;
1019
+ }
1020
+
1021
+ .j-footer__suit-stage {
1022
+ position: relative;
1023
+ display: inline-block;
1024
+ width: 1.5em;
1025
+ height: 1em;
1026
+ vertical-align: middle;
1027
+ }
1028
+
1029
+ .j-footer__suit-char {
1030
+ position: absolute;
1031
+ inset: 0;
1032
+ display: inline-flex;
1033
+ align-items: center;
1034
+ justify-content: center;
1035
+ opacity: 0;
1036
+ animation-duration: 5s;
1037
+ animation-delay: 0s;
1038
+ animation-iteration-count: infinite;
1039
+ animation-timing-function: ease-out;
1040
+ }
1041
+
1042
+
1043
+ /* ── Copy row label ───────────────────────────────────────────────────── */
1044
+
1045
+ .j-copy-row__label {
1046
+ letter-spacing: 2px;
1047
+ }
1048
+
1049
+
1050
+ /* ── Motely version badge ─────────────────────────────────────────────── */
1051
+
1052
+ .j-motely-badge {
1053
+ display: inline-flex;
1054
+ align-items: center;
1055
+ gap: 6px;
1056
+ }
1057
+
1058
+ .j-motely-badge--chip {
1059
+ padding: 3px 8px;
1060
+ border-radius: var(--j-radius-sm);
1061
+ background: var(--j-darkest);
1062
+ border: 1px solid var(--j-panel-edge);
1063
+ }
1064
+
1065
+ /* ── Font Dance Animation ─────────────────────────────────────────────── */
1066
+
1067
+ @keyframes j-font-dance {
1068
+ 0% { transform: translateY(0); }
1069
+ 25% { transform: translateY(-1px); }
1070
+ 50% { transform: translateY(0); }
1071
+ 75% { transform: translateY(1px); }
1072
+ 100% { transform: translateY(0); }
1073
+ }
1074
+
1075
+ .j-text--dance-container {
1076
+ display: inline-flex;
1077
+ }
1078
+
1079
+ .j-font-dance-char {
1080
+ display: inline-block;
1081
+ animation: j-font-dance 3s infinite ease-in-out;
1082
+ }
1083
+
1084
+ .hide-scrollbar {
1085
+ scrollbar-width: none;
1086
+ -ms-overflow-style: none;
1087
+ }
1088
+ .hide-scrollbar::-webkit-scrollbar {
1089
+ display: none;
1090
+ }
1091
+ .j-juice-hover { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
1092
+ .j-juice-hover:hover { transform: scale(1.05) translateY(-2px); z-index: 5; }