jaml-ui 0.20.1 → 0.21.1

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