jaml-ui 0.24.3 → 0.24.4

package/dist/ui/jimbo.css

@@ -1,1761 +1,1420 @@
-/* ═══════════════════════════════════════════════════════════════════════════
-   jimbo.css — Jimbo Design System
-   Balatro-inspired design tokens + component classes.
-   Eyedropped from actual game shader output — not Lua hex values.
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-/* Global Scrollbar Hide */
-* {
-  scrollbar-width: none !important;
-  -ms-overflow-style: none !important;
-}
-
-*::-webkit-scrollbar {
-  display: none !important;
-}
-
-/* ── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
-
-:root {
-  /* Colors — eyedropped from Balatro's rendered shader output */
-  --j-red: #ff4c40;
-  --j-blue: #0093ff;
-  --j-green: #429f79;
-  --j-orange: #ff9800;
-  --j-gold: #e4b643;
-  --j-purple: #9e74ce;
-
-  --j-dark-red: #a02721;
-  --j-dark-blue: #0057a1;
-  --j-dark-orange: #a05b00;
-  --j-dark-green: #215f46;
-  --j-dark-purple: #5e437e;
-
-  --j-dark-grey: #3a5055;
-  --j-darkest: #1e2b2d;
-  --j-grey: #708386;
-  --j-teal-grey: #404c4e;
-
-  --j-panel-edge: #1e2e32;
-  --j-inner-border: #334461;
-  --j-border-silver: #b9c2d2;
-  --j-border-south: #777e89;
-
-  --j-gold-text: #e4b643;
-  --j-green-text: #35bd86;
-  --j-orange-text: #ff8f00;
-  --j-white: #ffffff;
-  --j-black: #000000;
-
-  --j-tarot-btn: #9e74ce;
-  --j-planet-btn: #00a7ca;
-  --j-spectral-btn: #2e76fd;
-  --j-tarot-btn-dark: #5e437e;
-  --j-planet-btn-dark: #00657c;
-  --j-spectral-btn-dark: #14449e;
-
-  /* Typography */
-  --j-font: 'm6x11plus', 'Courier New', monospace;
-  --j-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-
-  /* Spacing */
-  --j-space-xs: 2px;
-  --j-space-sm: 4px;
-  --j-space-md: 8px;
-  --j-space-lg: 12px;
-  --j-space-xl: 16px;
-
-  /* Radii — Balatro is chunky, not bubbly. Never > 10px. */
-  --j-radius-sm: 4px;
-  --j-radius-md: 6px;
-  --j-radius-lg: 8px;
-  --j-radius-pill: 10px;
-
-  /* Animation */
-  --j-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --j-press-y: 3px;
-  --j-press-speed: 55ms;
-}
-
-
-/* ── Base Text ─────────────────────────────────────────────────────────── */
-
-.j-text {
-  font-family: var(--j-font);
-  font-weight: 400;
-  line-height: 1.2;
-  text-shadow: var(--j-text-shadow);
-  color: var(--j-white);
-}
-
-.j-text--no-shadow {
-  text-shadow: none;
-}
-
-.j-text--upper {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-/* Font Dance Animation */
-.j-text--dance-container {
-  display: inline-block;
-  white-space: pre-wrap;
-}
-
-.j-font-dance-char {
-  display: inline-block;
-  animation: j-font-dance 1.5s infinite steps(2, end);
-}
-
-@keyframes j-font-dance {
-
-  0%,
-  100% {
-    transform: translate(0, 0);
-  }
-
-  25% {
-    transform: translate(1px, -1px);
-  }
-
-  50% {
-    transform: translate(0, -2px);
-  }
-
-  75% {
-    transform: translate(-1px, -1px);
-  }
-}
-
-/* Sizes (from DESIGN.md typography scale) */
-.j-text--display {
-  font-size: 26px;
-  letter-spacing: 0.04em;
-  line-height: 1;
-}
-
-.j-text--xl {
-  font-size: 24px;
-  letter-spacing: 0.04em;
-}
-
-.j-text--lg {
-  font-size: 18px;
-  letter-spacing: 0.04em;
-}
-
-.j-text--heading {
-  font-size: 14px;
-  letter-spacing: 0.08em;
-  line-height: 1.2;
-}
-
-.j-text--md {
-  font-size: 14px;
-}
-
-.j-text--sm {
-  font-size: 12px;
-}
-
-.j-text--body {
-  font-size: 11px;
-  letter-spacing: 0.05em;
-  line-height: 1.3;
-}
-
-.j-text--xs {
-  font-size: 10px;
-}
-
-.j-text--label {
-  font-size: 9px;
-  letter-spacing: 0.1em;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.j-text--micro {
-  font-size: 8px;
-  letter-spacing: 0.08em;
-  line-height: 1;
-}
-
-/* Tones */
-.j-text--default {
-  color: var(--j-white);
-}
-
-.j-text--mult,
-.j-text--red {
-  color: var(--j-red);
-}
-
-.j-text--chips,
-.j-text--blue {
-  color: var(--j-blue);
-}
-
-.j-text--gold {
-  color: var(--j-gold-text);
-}
-
-.j-text--green {
-  color: var(--j-green-text);
-}
-
-.j-text--orange {
-  color: var(--j-orange-text);
-}
-
-.j-text--purple {
-  color: var(--j-purple);
-}
-
-.j-text--grey {
-  color: var(--j-grey);
-}
-
-
-/* ── Panel ─────────────────────────────────────────────────────────────── */
-
-.j-panel {
-  background-color: var(--j-dark-grey);
-  border: 2px solid var(--j-border-silver);
-  border-bottom-color: var(--j-border-south);
-  border-radius: var(--j-radius-md);
-  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
-  padding: var(--j-space-lg);
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  overflow: visible;
-  position: relative;
-}
-
-.j-panel__body {
-  flex: 1;
-  overflow: auto;
-}
-
-.j-panel__back {
-  margin-top: var(--j-space-lg);
-  padding-top: var(--j-space-md);
-  flex-shrink: 0;
-}
-
-.j-inner-panel {
-  background-color: var(--j-inner-border);
-  border: 2px solid var(--j-panel-edge);
-  border-radius: var(--j-radius-md);
-  padding: var(--j-space-lg);
-}
-
-
-/* ── Button ────────────────────────────────────────────────────────────── */
-/* Chunky 3D press: black underside via drop shadow,
-   press sinks the face +3px and collapses the shadow. */
-
-.j-btn {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-/* Invisible stable hit target to prevent hover jitter when the child transforms */
-.j-btn::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: transparent;
-  z-index: 10;
-}
-
-.j-btn--full {
-  width: 100%;
-}
-
-.j-btn--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.j-btn__face {
-  position: relative;
-  border-radius: var(--j-radius-md);
-  background: var(--j-btn-face-color, var(--j-orange));
-  text-align: center;
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-  box-shadow: 0 var(--j-press-y) 0 0 rgba(0, 0, 0, 0.6);
-  transform: translate(0, 0);
-  transition: transform var(--j-press-speed) linear, box-shadow var(--j-press-speed) linear;
-}
-
-.j-btn[data-pressed="true"] .j-btn__face,
-.j-btn:active:not(:disabled):not(.j-btn--disabled) .j-btn__face {
-  transform: translateY(var(--j-press-y));
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
-}
-
-.j-btn:not(.j-btn--disabled):hover .j-btn__face {
-  filter: brightness(1.1);
-}
-
-/* Sizes */
-.j-btn--xs .j-btn__face {
-  padding: 4px 8px;
-  font-size: 11px;
-}
-
-.j-btn--sm .j-btn__face {
-  padding: 6px 12px;
-  font-size: 13px;
-}
-
-.j-btn--md .j-btn__face {
-  padding: 10px 18px;
-  font-size: 16px;
-}
-
-.j-btn--lg .j-btn__face {
-  padding: 8px 18px;
-  font-size: 20px;
-}
-
-/* Tone colors — set via CSS custom properties */
-.j-btn--orange {
-  --j-btn-face-color: var(--j-orange);
-}
-
-.j-btn--red {
-  --j-btn-face-color: var(--j-red);
-}
-
-.j-btn--blue {
-  --j-btn-face-color: var(--j-blue);
-}
-
-.j-btn--green {
-  --j-btn-face-color: var(--j-green);
-}
-
-.j-btn--tarot {
-  --j-btn-face-color: var(--j-tarot-btn);
-}
-
-.j-btn--planet {
-  --j-btn-face-color: var(--j-planet-btn);
-}
-
-.j-btn--spectral {
-  --j-btn-face-color: var(--j-spectral-btn);
-}
-
-
-/* ── Badge ─────────────────────────────────────────────────────────────── */
-
-.j-badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--j-radius-sm);
-  font-family: var(--j-font);
-  font-weight: 400;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-  border: none;
-}
-
-.j-badge--sm {
-  padding: 2px 6px;
-  font-size: 10px;
-}
-
-.j-badge--md {
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-/* Badge tones — flat, no shadow, no edges */
-.j-badge--dark {
-  background: var(--j-darkest);
-  color: var(--j-white);
-}
-
-.j-badge--blue {
-  background: var(--j-blue);
-  color: var(--j-white);
-}
-
-.j-badge--red {
-  background: var(--j-red);
-  color: var(--j-white);
-}
-
-.j-badge--green {
-  background: var(--j-green);
-  color: var(--j-white);
-}
-
-.j-badge--orange {
-  background: var(--j-orange);
-  color: var(--j-white);
-}
-
-.j-badge--purple {
-  background: var(--j-purple);
-  color: var(--j-white);
-}
-
-
-/* ── Tabs ──────────────────────────────────────────────────────────────── */
-
-.j-tabs {
-  display: flex;
-  gap: var(--j-space-md);
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: visible;
-  padding-top: 12px;
-  scrollbar-width: none;
-}
-
-.j-tab {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  flex: 0 0 auto;
-  padding-top: 10px;
-}
-
-.j-tab__indicator {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 14px;
-  height: 10px;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.j-tab__indicator[data-active="true"] {
-  animation: jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite;
-}
-
-.j-tab__indicator[data-active="false"] {
-  opacity: 0;
-}
-
-.j-tab__btn {
-  appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  border-radius: var(--j-radius-lg);
-  padding: 4px 12px;
-  min-height: 28px;
-  background-color: var(--j-red);
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-  transition: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  color: var(--j-white);
-  font-family: var(--j-font);
-  font-size: 12px;
-  line-height: 1;
-  flex: 0 0 auto;
-}
-
-.j-tab__btn:hover,
-.j-tab__btn:active {
-  background-color: var(--j-dark-red);
-}
-
-.j-tab__btn[data-pressed="true"] {
-  transform: translateY(2px);
-  box-shadow: none;
-}
-
-@keyframes jimbo-bounce {
-
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-/* Vertical tabs */
-.j-vtabs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-sm);
-}
-
-.j-vtab {
-  border: none;
-  cursor: pointer;
-  border-radius: 8px 0 0 8px;
-  padding: 16px 8px;
-  background-color: var(--j-red);
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  transform: rotate(180deg);
-  transition: none;
-}
-
-
-/* ── Toggle List ──────────────────────────────────────────────────────── */
-
-.j-toggle-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-sm);
-}
-
-.j-toggle-list__title {
-  font-family: var(--j-font);
-  font-size: 12px;
-  color: var(--j-grey);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: var(--j-space-sm);
-}
-
-.j-toggle-item {
-  display: flex;
-  align-items: center;
-  gap: var(--j-space-md);
-  padding: 6px 8px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: var(--j-radius-sm);
-  cursor: pointer;
-  font-family: var(--j-font);
-  color: var(--j-white);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  text-align: left;
-  justify-content: flex-start;
-}
-
-.j-toggle-check {
-  width: 10px;
-  height: 10px;
-  flex-shrink: 0;
-  border: 1px solid var(--j-dark-grey);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.j-toggle-check[data-on="true"] {
-  background: var(--j-orange);
-}
-
-.j-toggle-check[data-on="false"] {
-  background: var(--j-darkest);
-}
-
-
-/* ── Tooltip ──────────────────────────────────────────────────────────── */
-
-.j-tooltip {
-  position: fixed;
-  max-width: 280px;
-  padding: 6px 10px;
-  border-radius: var(--j-radius-md);
-  background: var(--j-darkest);
-  border: 2px solid var(--j-border-silver);
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
-  color: var(--j-white);
-  pointer-events: none;
-  z-index: 10000;
-  transition: opacity 120ms ease;
-}
-
-
-/* ── Flank Nav ────────────────────────────────────────────────────────── */
-
-.j-flank {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  gap: var(--j-space-md);
-  width: 100%;
-  position: relative;
-}
-
-.j-flank__content {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.j-flank__btn {
-  flex-shrink: 0;
-  width: 40px;
-  margin: var(--j-press-y) 0;
-  border: none;
-  border-radius: var(--j-radius-lg);
-  cursor: pointer;
-  background-color: var(--j-red);
-  color: var(--j-white);
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 var(--j-press-y) 0 0 var(--j-dark-red);
-  transition: transform var(--j-press-speed) ease,
-    box-shadow var(--j-press-speed) ease,
-    background-color var(--j-press-speed) ease;
-}
-
-.j-flank__btn[data-pressed="true"] {
-  transform: translateY(var(--j-press-y));
-  box-shadow: none;
-}
-
-.j-flank__btn:disabled {
-  background-color: var(--j-dark-red);
-  cursor: default;
-  box-shadow: none;
-}
-
-
-/* ── Copy Row ─────────────────────────────────────────────────────────── */
-
-.j-copy-row {
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-sm);
-}
-
-.j-copy-row__field {
-  display: flex;
-  align-items: center;
-  gap: var(--j-space-md);
-}
-
-.j-copy-row__value {
-  flex: 1;
-  padding: 6px 10px;
-  background: var(--j-darkest);
-  border: 2px solid var(--j-panel-edge);
-  border-radius: var(--j-radius-sm);
-  word-break: break-all;
-}
-
-.j-copy-row__btn {
-  font-family: var(--j-font);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  border-radius: var(--j-radius-sm);
-  padding: 4px 12px;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-
-.j-copy-row__btn[data-copied="false"] {
-  color: var(--j-gold-text);
-  background: rgba(228, 182, 67, 0.12);
-  border: 1px solid var(--j-gold-text);
-}
-
-.j-copy-row__btn[data-copied="true"] {
-  color: var(--j-green-text);
-  background: rgba(53, 189, 134, 0.12);
-  border: 1px solid var(--j-green-text);
-}
-
-
-/* ── Code Block ───────────────────────────────────────────────────────── */
-
-.j-code-block {
-  background-color: var(--j-darkest);
-  border: 2px solid var(--j-panel-edge);
-  border-radius: var(--j-radius-lg);
-  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.j-code-block__header {
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--j-inner-border);
-}
-
-.j-code-block__meta {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.j-code-block__filename {
-  font-size: 10px;
-  opacity: 0.6;
-}
-
-.j-code-block__lang {
-  font-size: 9px;
-  padding: 1px 6px;
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.4);
-  color: #60a5fa;
-}
-
-.j-code-block__copy {
-  padding: 4px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-}
-
-.j-code-block__copy[data-copied="false"] {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.j-code-block__copy[data-copied="true"] {
-  color: #4ade80;
-}
-
-.j-code-block__pre {
-  padding: 12px;
-  overflow-x: auto;
-  font-family: monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: #f6f0d5;
-  margin: 0;
-}
-
-
-/* ── Filter Bar ───────────────────────────────────────────────────────── */
-
-.j-filter-bar {
-  display: flex;
-  gap: 24px;
-  padding: var(--j-space-xl);
-  background-color: var(--j-dark-grey);
-  border: 4px solid var(--j-border-silver);
-  box-shadow: 0 3px 0 0 var(--j-border-south);
-  border-radius: var(--j-radius-lg);
-  position: relative;
-  flex-wrap: wrap;
-}
-
-.j-filter-bar__field {
-  flex: 1;
-  min-width: 200px;
-  position: relative;
-  margin-top: 10px;
-}
-
-.j-filter-bar__pill {
-  position: absolute;
-  top: -14px;
-  left: 16px;
-  background-color: var(--j-red);
-  border: 2px solid var(--j-dark-red);
-  border-radius: var(--j-radius-md);
-  padding: 4px 12px;
-  z-index: 2;
-}
-
-.j-filter-bar__input {
-  width: 100%;
-  padding: 14px 16px 14px 48px;
-  background-color: var(--j-darkest);
-  border: none;
-  border-bottom: 4px solid var(--j-panel-edge);
-  border-radius: var(--j-radius-lg);
-  color: var(--j-white);
-  font-family: var(--j-font);
-  font-size: 20px;
-  letter-spacing: 0.08em;
-  outline: none;
-}
-
-.j-filter-bar__search-icon {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  color: var(--j-blue);
-  z-index: 1;
-}
-
-.j-filter-bar__select {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-color: var(--j-orange);
-  color: var(--j-white);
-  border: none;
-  border-bottom: 4px solid var(--j-dark-orange);
-  border-radius: var(--j-radius-lg);
-  cursor: pointer;
-  font-family: var(--j-font);
-  font-size: 18px;
-  letter-spacing: 0.08em;
-  padding: 14px 48px 14px 24px;
-  min-width: 200px;
-  text-align: center;
-  outline: none;
-}
-
-.j-filter-bar__sort-icon {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--j-white);
-  opacity: 0.85;
-}
-
-/* ── FlankNav ───────────────────────────────────────────────────────────── */
-
-.j-flank {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--j-space-md);
-  width: 100%;
-}
-
-.j-flank__content {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.j-flank__btn {
-  background: var(--j-red);
-  color: var(--j-white);
-  border: none;
-  border-radius: var(--j-radius-sm);
-  padding: var(--j-space-sm) var(--j-space-xs);
-  cursor: pointer;
-  box-shadow: 0 var(--j-press-y) 0 var(--j-dark-grey);
-  transition: transform 0.05s ease, box-shadow 0.05s ease, opacity 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.j-flank__btn[data-pressed="true"] {
-  transform: translateY(var(--j-press-y));
-  box-shadow: 0 0 0 var(--j-dark-grey);
-}
-
-.j-flank__btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: 0 var(--j-press-y) 0 var(--j-dark-grey);
-}
-
-
-/* ── Modal ────────────────────────────────────────────────────────────── */
-
-.j-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--j-space-xl);
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.j-modal {
-  width: 100%;
-  max-width: 375px;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.j-modal__title {
-  text-align: center;
-  margin: 0 0 var(--j-space-xl);
-}
-
-
-/* ── Footer ───────────────────────────────────────────────────────────── */
-
-.j-footer {
-  width: 100%;
-  transition: opacity 200ms;
-}
-
-.j-footer--hidden {
-  pointer-events: none;
-  opacity: 0;
-}
-
-.j-footer__bar {
-  width: 100%;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.9);
-  padding: 0 1rem 3px;
-  text-align: center;
-}
-
-.j-footer__text {
-  font-family: var(--j-font);
-  font-size: clamp(11px, 0.8vw + 8px, 14px);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0 0.5rem;
-  color: white;
-  margin: 0;
-}
-
-.j-footer__link {
-  color: var(--j-gold);
-  text-decoration: none;
-}
-
-
-/* ── Floating ─────────────────────────────────────────────────────────── */
-
-.j-floating {
-  position: absolute;
-  z-index: 20;
-}
-
-
-/* ── Background (canvas is styled inline because it's fixed fullscreen) ── */
-
-
-/* ── GlowRing ─────────────────────────────────────────────────────────── */
-
-.j-glow--must {
-  box-shadow: 0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);
-  animation: j-glow-pulse 1.6s ease-in-out infinite;
-}
-
-.j-glow--should {
-  box-shadow: 0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);
-  animation: j-glow-pulse 1.6s ease-in-out infinite;
-}
-
-@keyframes j-glow-pulse {
-
-  0%,
-  100% {
-    opacity: 0.55;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-
-/* ── Utility ──────────────────────────────────────────────────────────── */
-
-.j-flex {
-  display: flex;
-}
-
-.j-flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.j-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.j-items-center {
-  align-items: center;
-}
-
-.j-justify-center {
-  justify-content: center;
-}
-
-.j-gap-xs {
-  gap: var(--j-space-xs);
-}
-
-.j-gap-sm {
-  gap: var(--j-space-sm);
-}
-
-.j-gap-md {
-  gap: var(--j-space-md);
-}
-
-.j-gap-lg {
-  gap: var(--j-space-lg);
-}
-
-.j-gap-xl {
-  gap: var(--j-space-xl);
-}
-
-.j-w-full {
-  width: 100%;
-}
-
-.j-shrink-0 {
-  flex-shrink: 0;
-}
-
-.j-flex-1 {
-  flex: 1;
-}
-
-.j-min-w-0 {
-  min-width: 0;
-}
-
-.j-text-center {
-  text-align: center;
-}
-
-.j-overflow-hidden {
-  overflow: hidden;
-}
-
-.j-overflow-auto {
-  overflow: auto;
-}
-
-.j-relative {
-  position: relative;
-}
-
-/* Tone border utilities */
-.j-border--red {
-  border-color: var(--j-red);
-}
-
-.j-border--blue {
-  border-color: var(--j-blue);
-}
-
-.j-border--green {
-  border-color: var(--j-green);
-}
-
-.j-border--gold {
-  border-color: var(--j-gold);
-}
-
-.j-border--orange {
-  border-color: var(--j-orange);
-}
-
-.j-border--purple {
-  border-color: var(--j-purple);
-}
-
-/* Tone background utilities */
-.j-bg--red {
-  background-color: var(--j-red);
-}
-
-.j-bg--blue {
-  background-color: var(--j-blue);
-}
-
-.j-bg--green {
-  background-color: var(--j-green);
-}
-
-.j-bg--gold {
-  background-color: var(--j-gold);
-}
-
-.j-bg--orange {
-  background-color: var(--j-orange);
-}
-
-.j-bg--purple {
-  background-color: var(--j-purple);
-}
-
-.j-bg--dark-grey {
-  background-color: var(--j-dark-grey);
-}
-
-.j-bg--darkest {
-  background-color: var(--j-darkest);
-}
-
-/* ── App Shell ────────────────────────────────────────────────────────── */
-/* Mobile-first 375px layout container for ALL Jimbo UI screens.
- * Supports container queries for responsive breakpoints:
- *   compact  ≤400px  — iPhone SE, fixed 667px height, NO scroll
- *   cozy     401-750px — MCP inline / wider phones, flexible height, scroll OK
- *   wide     751px+  — tablet/desktop, two-column layouts (future)
- *
- * Default = compact (hard lock). Add .j-app--fluid to unlock for MCP/desktop.
- */
-
-.j-app {
-  container-type: inline-size;
-  container-name: jimbo;
-  width: 375px;
-  max-width: 375px;
-  height: 667px;
-  max-height: 667px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  background: var(--j-darkest);
-  font-family: var(--j-font);
-  color: var(--j-white);
-  overflow: hidden;
-  position: relative;
-}
-
-/* Fluid modifier — unlocks the container for MCP / desktop contexts. */
-.j-app--fluid {
-  width: 100%;
-  max-width: 750px;
-  height: auto;
-  max-height: none;
-  min-height: 400px;
-}
-
-.j-app__content {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
-  display: flex;
-  flex-direction: column;
-}
-
-.j-app__scroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.j-app__scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.j-app__footer {
-  flex-shrink: 0;
-  padding: var(--j-space-md) var(--j-space-lg) var(--j-space-md);
-  border-top: 2px solid var(--j-black);
-  background: var(--j-dark-grey);
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-sm);
-}
-
-/* ── Cozy Breakpoint (401px+) ──────────────────────────────────────── */
-/* Only activates when j-app--fluid is used AND container is wide enough. */
-
-@container jimbo (min-width: 401px) {
-  .j-app__content {
-    padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
-  }
-
-  .j-app__scroll {
-    padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
-  }
-
-  .j-app__footer {
-    padding: var(--j-space-md) var(--j-space-xl) var(--j-space-lg);
-  }
-}
-
-@container jimbo (min-width: 401px) {
-  .j-stat-grid__value {
-    font-size: 20px;
-  }
-
-  .j-info-card {
-    padding: var(--j-space-md) var(--j-space-lg);
-  }
-
-  .j-info-card__title {
-    font-size: 14px;
-  }
-
-  .j-section-header__tag {
-    font-size: 12px;
-  }
-}
-
-
-/* ── Section Header ──────────────────────────────────────────────────── */
-/* Colored tag + horizontal rule — reusable section divider. */
-
-.j-section-header {
-  display: flex;
-  align-items: center;
-  gap: var(--j-space-md);
-  margin-bottom: var(--j-space-md);
-}
-
-.j-section-header__tag {
-  font-family: var(--j-font);
-  font-size: 11px;
-  letter-spacing: 2px;
-  padding: 2px 8px;
-  color: var(--j-white);
-  border-radius: 3px;
-  text-shadow: var(--j-text-shadow);
-  flex-shrink: 0;
-}
-
-.j-section-header__rule {
-  flex: 1;
-  height: 2px;
-  border-radius: 1px;
-  opacity: 0.33;
-}
-
-
-/* ── Stat Grid ───────────────────────────────────────────────────────── */
-/* 3-column stat bar — reusable primitive. */
-
-.j-stat-grid {
-  background: var(--j-dark-grey);
-  border-radius: var(--j-radius-md);
-  padding: var(--j-space-md);
-  border: 2px solid var(--j-panel-edge);
-  box-shadow: 0 2px 0 var(--j-black);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--j-space-md);
-  text-align: center;
-}
-
-.j-stat-grid__value {
-  font-family: var(--j-font);
-  font-size: 16px;
-  color: var(--j-gold-text);
-  text-shadow: var(--j-text-shadow);
-}
-
-.j-stat-grid__label {
-  font-family: var(--j-font);
-  font-size: 9px;
-  color: var(--j-grey);
-  letter-spacing: 2px;
-  margin-top: 2px;
-}
-
-
-/* ── Info Card ───────────────────────────────────────────────────────── */
-/* Generic clickable row card — used for filter lists, seed lists, etc. */
-
-.j-info-card {
-  background: var(--j-dark-grey);
-  border-radius: var(--j-radius-md);
-  padding: var(--j-space-md);
-  box-shadow: 0 2px 0 var(--j-black);
-  display: flex;
-  align-items: center;
-  gap: var(--j-space-md);
-  cursor: pointer;
-  border: 2px solid transparent;
-}
-
-.j-info-card:hover {
-  filter: brightness(1.08);
-}
-
-.j-info-card__body {
-  flex: 1;
-  min-width: 0;
-}
-
-.j-info-card__title {
-  font-family: var(--j-font);
-  font-size: 13px;
-  color: var(--j-white);
-  letter-spacing: 1px;
-  text-shadow: var(--j-text-shadow);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.j-info-card__sub {
-  font-family: var(--j-font);
-  font-size: 9px;
-  color: var(--j-gold-text);
-  letter-spacing: 1px;
-  margin-top: 2px;
-}
-
-.j-info-card__aside {
-  text-align: right;
-  flex-shrink: 0;
-}
-
-
-/* ── Inset Box ───────────────────────────────────────────────────────── */
-/* Dark recessed content area — for log output, recent finds, etc. */
-
-.j-inset {
-  background: var(--j-dark-grey);
-  border-radius: var(--j-radius-md);
-  padding: var(--j-space-md) var(--j-space-md);
-  border: 2px solid var(--j-panel-edge);
-  box-shadow: 0 2px 0 var(--j-black);
-  font-family: var(--j-font);
-  font-size: 11px;
-  color: var(--j-grey);
-  letter-spacing: 1px;
-  line-height: 1.7;
-}
-
-
-/* ── Wordmark ────────────────────────────────────────────────────────── */
-/* Title + subtitle hero block. */
-
-.j-wordmark {
-  text-align: center;
-  margin-bottom: var(--j-space-xl);
-}
-
-.j-wordmark__title {
-  font-family: var(--j-font);
-  font-size: 32px;
-  letter-spacing: 3px;
-  line-height: 1;
-  color: var(--j-gold-text);
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
-}
-
-.j-wordmark__sub {
-  font-family: var(--j-font);
-  font-size: 14px;
-  letter-spacing: 4px;
-  color: var(--j-grey);
-  margin-top: 4px;
-  text-shadow: var(--j-text-shadow);
-}
-
-
-/* ── Seed Input ───────────────────────────────────────────────────────── */
-
-.j-seed-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-sm);
-}
-
-.j-seed-input__field {
-  width: 100%;
-  padding: 8px 12px;
-  border-radius: var(--j-radius-md);
-  border: 2px solid var(--j-panel-edge);
-  background: var(--j-darkest);
-  color: var(--j-gold-text);
-  font-size: 18px;
-  font-family: var(--j-font);
-  font-weight: 400;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  text-shadow: var(--j-text-shadow);
-  outline: none;
-  transition: border-color 100ms ease;
-  box-sizing: border-box;
-}
-
-.j-seed-input__field::placeholder {
-  color: var(--j-grey);
-  opacity: 0.6;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-size: 12px;
-}
-
-.j-seed-input__field:focus {
-  border-color: var(--j-gold);
-}
-
-.j-seed-input__field[data-valid="true"] {
-  border-color: var(--j-green);
-}
-
-.j-seed-input__field[data-valid="false"] {
-  border-color: var(--j-red);
-}
-
-.j-seed-input__field[data-valid="partial"] {
-  border-color: var(--j-panel-edge);
-}
-
-.j-seed-input__hint {
-  font-family: var(--j-font);
-  font-size: 9px;
-  letter-spacing: 0.08em;
-  color: var(--j-grey);
-  text-shadow: var(--j-text-shadow);
-}
-
-
-/* ── Aesthetic Selector ──────────────────────────────────────────────── */
-
-.j-aesthetic-selector {
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-sm);
-}
-
-.j-aesthetic-selector__list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--j-space-sm);
-}
-
-.j-aesthetic-pill {
-  padding: 4px 10px;
-  border-radius: var(--j-radius-md);
-  border: 2px solid var(--j-panel-edge);
-  background: var(--j-darkest);
-  color: var(--j-grey);
-  cursor: pointer;
-  font-size: 11px;
-  font-family: var(--j-font);
-  font-weight: 400;
-  letter-spacing: 0.04em;
-  text-shadow: var(--j-text-shadow);
-  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
-}
-
-.j-aesthetic-pill:hover {
-  border-color: var(--j-gold);
-  color: var(--j-gold-text);
-}
-
-.j-aesthetic-pill[data-active="true"] {
-  border-color: var(--j-gold);
-  background: rgba(228, 182, 67, 0.13);
-  color: var(--j-gold-text);
-  box-shadow: 0 0 0 1px var(--j-gold), 0 2px 0 0 rgba(0, 0, 0, 0.3);
-}
-
-
-/* ── Showcase ─────────────────────────────────────────────────────────── */
-
-.j-showcase {
-  width: 100%;
-  height: 100%;
-  background: var(--j-darkest);
-  display: flex;
-  flex-direction: column;
-  font-family: var(--j-font);
-  color: var(--j-white);
-  overflow: hidden;
-}
-
-.j-showcase__scroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 18px 14px 10px;
-}
-
-.j-showcase__wordmark {
-  text-align: center;
-  margin-bottom: 18px;
-}
-
-.j-showcase__wordmark-title {
-  font-size: 32px;
-  letter-spacing: 3px;
-  line-height: 1;
-  color: var(--j-gold-text);
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
-}
-
-.j-showcase__wordmark-sub {
-  font-size: 14px;
-  letter-spacing: 4px;
-  color: var(--j-grey);
-  margin-top: 4px;
-  text-shadow: var(--j-text-shadow);
-}
-
-.j-showcase__stats {
-  background: var(--j-dark-grey);
-  border-radius: var(--j-radius-md);
-  padding: 10px;
-  border: 2px solid var(--j-panel-edge);
-  box-shadow: 0 2px 0 var(--j-black);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--j-space-md);
-  text-align: center;
-  margin-bottom: var(--j-space-xl);
-}
-
-.j-showcase__stat-value {
-  font-size: 16px;
-  color: var(--j-gold-text);
-  text-shadow: var(--j-text-shadow);
-}
-
-.j-showcase__stat-label {
-  font-size: 9px;
-  color: var(--j-grey);
-  letter-spacing: 2px;
-  margin-top: 2px;
-}
-
-.j-showcase__section-header {
-  display: flex;
-  align-items: center;
-  gap: var(--j-space-md);
-  margin-bottom: var(--j-space-md);
-}
-
-.j-showcase__section-tag {
-  font-size: 11px;
-  letter-spacing: 2px;
-  padding: 2px 8px;
-  color: var(--j-white);
-  border-radius: 3px;
-  text-shadow: var(--j-text-shadow);
-}
-
-.j-showcase__section-rule {
-  flex: 1;
-  height: 2px;
-  border-radius: 1px;
-}
-
-.j-showcase__filter-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--j-space-md);
-  margin-bottom: var(--j-space-xl);
-}
-
-.j-showcase__filter-card {
-  background: var(--j-dark-grey);
-  border-radius: var(--j-radius-md);
-  padding: 10px;
-  box-shadow: 0 2px 0 var(--j-black);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-}
-
-.j-showcase__filter-sprites {
-  display: flex;
-  gap: 2px;
-}
-
-.j-showcase__filter-sprite {
-  width: 30px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.j-showcase__filter-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.j-showcase__filter-name {
-  font-size: 13px;
-  color: var(--j-white);
-  letter-spacing: 1px;
-  text-shadow: var(--j-text-shadow);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.j-showcase__filter-author {
-  font-size: 9px;
-  color: var(--j-gold-text);
-  letter-spacing: 1px;
-  margin-top: 2px;
-}
-
-.j-showcase__filter-hits {
-  text-align: right;
-}
-
-.j-showcase__filter-hits-value {
-  font-size: 14px;
-  text-shadow: var(--j-text-shadow);
-}
-
-.j-showcase__filter-hits-label {
-  font-size: 8px;
-  color: var(--j-grey);
-  letter-spacing: 1px;
-}
-
-.j-showcase__recent {
-  background: var(--j-dark-grey);
-  border-radius: var(--j-radius-md);
-  padding: 8px 10px;
-  border: 2px solid var(--j-panel-edge);
-  box-shadow: 0 2px 0 var(--j-black);
-  font-size: 11px;
-  color: var(--j-grey);
-  letter-spacing: 1px;
-  line-height: 1.7;
-}
-
-.j-showcase__actions {
-  padding: 8px 10px 10px;
-  border-top: 2px solid var(--j-black);
-  background: var(--j-dark-grey);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-
-/* ── Footer suit animation ────────────────────────────────────────────── */
-
-.j-footer__suits {
-  display: inline-flex;
-  align-items: center;
-}
-
-.j-footer__suit-stage {
-  position: relative;
-  display: inline-block;
-  width: 1.5em;
-  height: 1em;
-  vertical-align: middle;
-}
-
-.j-footer__suit-char {
-  position: absolute;
-  inset: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  animation-duration: 5s;
-  animation-delay: 0s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-out;
-}
-
-
-/* ── Copy row label ───────────────────────────────────────────────────── */
-
-.j-copy-row__label {
-  letter-spacing: 2px;
-}
-
-
-/* ── Motely version badge ─────────────────────────────────────────────── */
-
-.j-motely-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.j-motely-badge--chip {
-  padding: 3px 8px;
-  border-radius: var(--j-radius-sm);
-  background: var(--j-darkest);
-  border: 1px solid var(--j-panel-edge);
-}
-
-/* ── Font Dance Animation ─────────────────────────────────────────────── */
-
-@keyframes j-font-dance {
-  0% {
-    transform: translateY(0);
-  }
-
-  25% {
-    transform: translateY(-1px);
-  }
-
-  50% {
-    transform: translateY(0);
-  }
-
-  75% {
-    transform: translateY(1px);
-  }
-
-  100% {
-    transform: translateY(0);
-  }
-}
-
-.j-text--dance-container {
-  display: inline-flex;
-}
-
-.j-font-dance-char {
-  display: inline-block;
-  animation: j-font-dance 3s infinite ease-in-out;
-}
-
-.hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.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;
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   jimbo.css — Jimbo Design System
+   Balatro-inspired design tokens + component classes.
+   Eyedropped from actual game shader output — not Lua hex values.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Global Scrollbar Hide */
+* {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+*::-webkit-scrollbar {
+  display: none !important;
+}
+
+/* ── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
+
+:root {
+  /* Colors — eyedropped from Balatro's rendered shader output */
+  --j-red: #ff4c40;
+  --j-blue: #0093ff;
+  --j-green: #429f79;
+  --j-orange: #ff9800;
+  --j-gold: #e4b643;
+  --j-purple: #9e74ce;
+
+  --j-dark-red: #a02721;
+  --j-dark-blue: #0057a1;
+  --j-dark-orange: #a05b00;
+  --j-dark-green: #215f46;
+  --j-dark-purple: #5e437e;
+
+  --j-dark-grey: #3a5055;
+  --j-darkest: #1e2b2d;
+  --j-grey: #708386;
+  --j-teal-grey: #404c4e;
+
+  --j-panel-edge: #1e2e32;
+  --j-inner-border: #334461;
+  --j-border-silver: #b9c2d2;
+  --j-border-south: #777e89;
+
+  --j-gold-text: #e4b643;
+  --j-green-text: #35bd86;
+  --j-orange-text: #ff8f00;
+  --j-white: #ffffff;
+  --j-black: #000000;
+
+  --j-tarot-btn: #9e74ce;
+  --j-planet-btn: #00a7ca;
+  --j-spectral-btn: #2e76fd;
+  --j-tarot-btn-dark: #5e437e;
+  --j-planet-btn-dark: #00657c;
+  --j-spectral-btn-dark: #14449e;
+
+  /* Typography */
+  --j-font: 'm6x11plus', 'Courier New', monospace;
+  --j-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+
+  /* Spacing */
+  --j-space-xs: 2px;
+  --j-space-sm: 4px;
+  --j-space-md: 8px;
+  --j-space-lg: 12px;
+  --j-space-xl: 16px;
+
+  /* Radii — Balatro is chunky, not bubbly. Never > 10px. */
+  --j-radius-sm: 4px;
+  --j-radius-md: 6px;
+  --j-radius-lg: 8px;
+  --j-radius-pill: 10px;
+
+  /* Animation */
+  --j-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --j-press-y: 3px;
+  --j-press-speed: 55ms;
+}
+
+
+/* ── Base Text ─────────────────────────────────────────────────────────── */
+
+.j-text {
+  font-family: var(--j-font);
+  font-weight: 400;
+  line-height: 1.2;
+  text-shadow: var(--j-text-shadow);
+  color: var(--j-white);
+}
+.j-text--no-shadow { text-shadow: none; }
+.j-text--upper {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/* Font Dance Animation */
+.j-text--dance-container {
+  display: inline-block;
+  white-space: pre-wrap;
+}
+
+.j-font-dance-char {
+  display: inline-block;
+  animation: j-font-dance 1.5s infinite steps(2, end);
+}
+
+@keyframes j-font-dance {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(1px, -1px); }
+  50% { transform: translate(0, -2px); }
+  75% { transform: translate(-1px, -1px); }
+}
+
+/* Sizes (from DESIGN.md typography scale) */
+.j-text--display { font-size: 26px; letter-spacing: 0.04em; line-height: 1; }
+.j-text--xl      { font-size: 24px; letter-spacing: 0.04em; }
+.j-text--lg      { font-size: 18px; letter-spacing: 0.04em; }
+.j-text--heading  { font-size: 14px; letter-spacing: 0.08em; line-height: 1.2; }
+.j-text--md      { font-size: 14px; }
+.j-text--sm      { font-size: 12px; }
+.j-text--body    { font-size: 11px; letter-spacing: 0.05em; line-height: 1.3; }
+.j-text--xs      { font-size: 10px; }
+.j-text--label   { font-size: 9px; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; }
+.j-text--micro   { font-size: 8px; letter-spacing: 0.08em; line-height: 1; }
+
+/* Tones */
+.j-text--default { color: var(--j-white); }
+.j-text--mult,
+.j-text--red     { color: var(--j-red); }
+.j-text--chips,
+.j-text--blue    { color: var(--j-blue); }
+.j-text--gold    { color: var(--j-gold-text); }
+.j-text--green   { color: var(--j-green-text); }
+.j-text--orange  { color: var(--j-orange-text); }
+.j-text--purple  { color: var(--j-purple); }
+.j-text--grey    { color: var(--j-grey); }
+
+
+/* ── Panel ─────────────────────────────────────────────────────────────── */
+
+.j-panel {
+  background-color: var(--j-dark-grey);
+  border: 2px solid var(--j-border-silver);
+  border-bottom-color: var(--j-border-south);
+  border-radius: var(--j-radius-md);
+  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55),
+              inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+  padding: var(--j-space-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: visible;
+  position: relative;
+}
+
+.j-panel__body {
+  flex: 1;
+  overflow: auto;
+}
+
+.j-panel__back {
+  margin-top: var(--j-space-lg);
+  padding-top: var(--j-space-md);
+  flex-shrink: 0;
+}
+
+.j-inner-panel {
+  background-color: var(--j-inner-border);
+  border: 2px solid var(--j-panel-edge);
+  border-radius: var(--j-radius-md);
+  padding: var(--j-space-lg);
+}
+
+
+/* ── Button ────────────────────────────────────────────────────────────── */
+/* Chunky 3D press: black underside via drop shadow,
+   press sinks the face +3px and collapses the shadow. */
+
+.j-btn {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* Invisible stable hit target to prevent hover jitter when the child transforms */
+.j-btn::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  z-index: 10;
+}
+.j-btn--full { width: 100%; }
+.j-btn--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.j-btn__face {
+  position: relative;
+  border-radius: var(--j-radius-md);
+  background: var(--j-btn-face-color, var(--j-orange));
+  text-align: center;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+  box-shadow: 0 var(--j-press-y) 0 0 rgba(0, 0, 0, 0.6);
+  transform: translate(0, 0);
+  transition: transform var(--j-press-speed) linear, box-shadow var(--j-press-speed) linear;
+}
+.j-btn[data-pressed="true"] .j-btn__face,
+.j-btn:active:not(:disabled):not(.j-btn--disabled) .j-btn__face {
+  transform: translateY(var(--j-press-y));
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
+}
+.j-btn:not(.j-btn--disabled):hover .j-btn__face {
+  filter: brightness(1.1);
+}
+
+/* Sizes */
+.j-btn--xs .j-btn__face { padding: 4px 8px;  font-size: 11px; }
+.j-btn--sm .j-btn__face { padding: 6px 12px; font-size: 13px; }
+.j-btn--md .j-btn__face { padding: 10px 18px; font-size: 16px; }
+.j-btn--lg .j-btn__face { padding: 8px 18px; font-size: 20px; }
+
+/* Tone colors — set via CSS custom properties */
+.j-btn--orange   { --j-btn-face-color: var(--j-orange); }
+.j-btn--red      { --j-btn-face-color: var(--j-red); }
+.j-btn--blue     { --j-btn-face-color: var(--j-blue); }
+.j-btn--green    { --j-btn-face-color: var(--j-green); }
+.j-btn--tarot    { --j-btn-face-color: var(--j-tarot-btn); }
+.j-btn--planet   { --j-btn-face-color: var(--j-planet-btn); }
+.j-btn--spectral { --j-btn-face-color: var(--j-spectral-btn); }
+
+
+/* ── Badge ─────────────────────────────────────────────────────────────── */
+
+.j-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--j-radius-sm);
+  font-family: var(--j-font);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+  border: none;
+}
+.j-badge--sm { padding: 2px 6px; font-size: 10px; }
+.j-badge--md { padding: 4px 8px; font-size: 12px; }
+
+/* Badge tones — flat, no shadow, no edges */
+.j-badge--dark   { background: var(--j-darkest);  color: var(--j-white); }
+.j-badge--blue   { background: var(--j-blue);     color: var(--j-white); }
+.j-badge--red    { background: var(--j-red);      color: var(--j-white); }
+.j-badge--green  { background: var(--j-green);    color: var(--j-white); }
+.j-badge--orange { background: var(--j-orange);   color: var(--j-white); }
+.j-badge--purple { background: var(--j-purple);   color: var(--j-white); }
+
+
+/* ── Tabs ──────────────────────────────────────────────────────────────── */
+
+.j-tabs {
+  display: flex;
+  gap: var(--j-space-md);
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.j-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.j-tab__indicator {
+  margin-bottom: var(--j-space-sm);
+  display: flex;
+  justify-content: center;
+}
+.j-tab__indicator svg {
+  fill: var(--j-gold, #e4b643);
+  display: block;
+}
+.j-tab__indicator[data-active="true"] {
+  animation: jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite;
+}
+.j-tab__indicator[data-active="false"] {
+  visibility: hidden;
+}
+
+.j-tab__btn {
+  border: none;
+  cursor: pointer;
+  border-radius: var(--j-radius-sm);
+  padding: 4px 12px;
+  background-color: transparent;
+  box-shadow: none;
+  transition: none;
+}
+.j-tab__btn[data-active="true"] {
+  background-color: var(--j-gold);
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
+}
+.j-tab__btn[data-active="true"]:hover {
+  background-color: var(--j-gold);
+}
+.j-tab__btn[data-active="false"]:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+.j-tab__btn[data-pressed="true"] {
+  transform: translateY(2px);
+  box-shadow: none;
+}
+
+@keyframes jimbo-bounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-3px); }
+}
+
+/* Vertical tabs */
+.j-vtabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-sm);
+}
+
+.j-vtab {
+  border: none;
+  cursor: pointer;
+  border-radius: 8px 0 0 8px;
+  padding: 16px 8px;
+  background-color: transparent;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  transition: none;
+}
+.j-vtab[data-active="true"] {
+  background-color: var(--j-gold, #e4b643);
+  color: var(--j-black, #000000);
+}
+
+
+/* ── Toggle List ──────────────────────────────────────────────────────── */
+
+.j-toggle-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-sm);
+}
+
+.j-toggle-list__title {
+  font-family: var(--j-font);
+  font-size: 12px;
+  color: var(--j-grey);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: var(--j-space-sm);
+}
+
+.j-toggle-item {
+  display: flex;
+  align-items: center;
+  gap: var(--j-space-md);
+  padding: 6px 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: var(--j-radius-sm);
+  cursor: pointer;
+  font-family: var(--j-font);
+  color: var(--j-white);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.j-toggle-check {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  border: 1px solid var(--j-dark-grey);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+.j-toggle-check[data-on="true"]  { background: var(--j-orange); }
+.j-toggle-check[data-on="false"] { background: var(--j-darkest); }
+
+
+/* ── Tooltip ──────────────────────────────────────────────────────────── */
+
+.j-tooltip {
+  position: fixed;
+  max-width: 280px;
+  padding: 6px 10px;
+  border-radius: var(--j-radius-md);
+  background: var(--j-darkest);
+  border: 2px solid var(--j-border-silver);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
+  color: var(--j-white);
+  pointer-events: none;
+  z-index: 10000;
+  transition: opacity 120ms ease;
+}
+
+
+/* ── Flank Nav ────────────────────────────────────────────────────────── */
+
+.j-flank {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--j-space-md);
+  width: 100%;
+  position: relative;
+}
+
+.j-flank__content {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.j-flank__btn {
+  flex-shrink: 0;
+  width: 40px;
+  margin: var(--j-press-y) 0;
+  border: none;
+  border-radius: var(--j-radius-lg);
+  cursor: pointer;
+  background-color: var(--j-red);
+  color: var(--j-white);
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 var(--j-press-y) 0 0 var(--j-dark-red);
+  transition: transform var(--j-press-speed) ease,
+              box-shadow var(--j-press-speed) ease,
+              background-color var(--j-press-speed) ease;
+}
+.j-flank__btn[data-pressed="true"] {
+  transform: translateY(var(--j-press-y));
+  box-shadow: none;
+}
+.j-flank__btn:disabled {
+  background-color: var(--j-dark-red);
+  cursor: default;
+  box-shadow: none;
+}
+
+
+/* ── Copy Row ─────────────────────────────────────────────────────────── */
+
+.j-copy-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-sm);
+}
+
+.j-copy-row__field {
+  display: flex;
+  align-items: center;
+  gap: var(--j-space-md);
+}
+
+.j-copy-row__value {
+  flex: 1;
+  padding: 6px 10px;
+  background: var(--j-darkest);
+  border: 2px solid var(--j-panel-edge);
+  border-radius: var(--j-radius-sm);
+  word-break: break-all;
+}
+
+.j-copy-row__btn {
+  font-family: var(--j-font);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  border-radius: var(--j-radius-sm);
+  padding: 4px 12px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.j-copy-row__btn[data-copied="false"] {
+  color: var(--j-gold-text);
+  background: rgba(228, 182, 67, 0.12);
+  border: 1px solid var(--j-gold-text);
+}
+.j-copy-row__btn[data-copied="true"] {
+  color: var(--j-green-text);
+  background: rgba(53, 189, 134, 0.12);
+  border: 1px solid var(--j-green-text);
+}
+
+
+/* ── Code Block ───────────────────────────────────────────────────────── */
+
+.j-code-block {
+  background-color: var(--j-darkest);
+  border: 2px solid var(--j-panel-edge);
+  border-radius: var(--j-radius-lg);
+  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.j-code-block__header {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--j-inner-border);
+}
+
+.j-code-block__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.j-code-block__filename {
+  font-size: 10px;
+  opacity: 0.6;
+}
+
+.j-code-block__lang {
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.4);
+  color: #60a5fa;
+}
+
+.j-code-block__copy {
+  padding: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+}
+.j-code-block__copy[data-copied="false"] { color: rgba(255, 255, 255, 0.5); }
+.j-code-block__copy[data-copied="true"]  { color: #4ade80; }
+
+.j-code-block__pre {
+  padding: 12px;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #f6f0d5;
+  margin: 0;
+}
+
+
+/* ── Filter Bar ───────────────────────────────────────────────────────── */
+
+.j-filter-bar {
+  display: flex;
+  gap: 24px;
+  padding: var(--j-space-xl);
+  background-color: var(--j-dark-grey);
+  border: 4px solid var(--j-border-silver);
+  box-shadow: 0 3px 0 0 var(--j-border-south);
+  border-radius: var(--j-radius-lg);
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.j-filter-bar__field {
+  flex: 1;
+  min-width: 200px;
+  position: relative;
+  margin-top: 10px;
+}
+
+.j-filter-bar__pill {
+  position: absolute;
+  top: -14px;
+  left: 16px;
+  background-color: var(--j-red);
+  border: 2px solid var(--j-dark-red);
+  border-radius: var(--j-radius-md);
+  padding: 4px 12px;
+  z-index: 2;
+}
+
+.j-filter-bar__input {
+  width: 100%;
+  padding: 14px 16px 14px 48px;
+  background-color: var(--j-darkest);
+  border: none;
+  border-bottom: 4px solid var(--j-panel-edge);
+  border-radius: var(--j-radius-lg);
+  color: var(--j-white);
+  font-family: var(--j-font);
+  font-size: 20px;
+  letter-spacing: 0.08em;
+  outline: none;
+}
+
+.j-filter-bar__search-icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--j-blue);
+  z-index: 1;
+}
+
+.j-filter-bar__select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: var(--j-orange);
+  color: var(--j-white);
+  border: none;
+  border-bottom: 4px solid var(--j-dark-orange);
+  border-radius: var(--j-radius-lg);
+  cursor: pointer;
+  font-family: var(--j-font);
+  font-size: 18px;
+  letter-spacing: 0.08em;
+  padding: 14px 48px 14px 24px;
+  min-width: 200px;
+  text-align: center;
+  outline: none;
+}
+
+.j-filter-bar__sort-icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--j-white);
+  opacity: 0.85;
+}
+
+/* ── FlankNav ───────────────────────────────────────────────────────────── */
+
+.j-flank {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--j-space-md);
+  width: 100%;
+}
+
+.j-flank__content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.j-flank__btn {
+  background: var(--j-red);
+  color: var(--j-white);
+  border: none;
+  border-radius: var(--j-radius-sm);
+  padding: var(--j-space-sm) var(--j-space-xs);
+  cursor: pointer;
+  box-shadow: 0 var(--j-press-y) 0 var(--j-dark-grey);
+  transition: transform 0.05s ease, box-shadow 0.05s ease, opacity 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-flank__btn[data-pressed="true"] {
+  transform: translateY(var(--j-press-y));
+  box-shadow: 0 0 0 var(--j-dark-grey);
+}
+
+.j-flank__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 var(--j-press-y) 0 var(--j-dark-grey);
+}
+
+
+/* ── Modal ────────────────────────────────────────────────────────────── */
+
+.j-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--j-space-xl);
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.j-modal {
+  width: 100%;
+  max-width: 375px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.j-modal__title {
+  text-align: center;
+  margin: 0 0 var(--j-space-xl);
+}
+
+
+/* ── Footer ───────────────────────────────────────────────────────────── */
+
+.j-footer {
+  width: 100%;
+  transition: opacity 200ms;
+}
+.j-footer--hidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.j-footer__bar {
+  width: 100%;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.9);
+  padding: 0 1rem 3px;
+  text-align: center;
+}
+
+.j-footer__text {
+  font-family: var(--j-font);
+  font-size: clamp(11px, 0.8vw + 8px, 14px);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0 0.5rem;
+  color: white;
+  margin: 0;
+}
+
+.j-footer__link {
+  color: var(--j-gold);
+  text-decoration: none;
+}
+
+
+/* ── Floating ─────────────────────────────────────────────────────────── */
+
+.j-floating { position: absolute; z-index: 20; }
+
+
+/* ── Background (canvas is styled inline because it's fixed fullscreen) ── */
+
+
+/* ── GlowRing ─────────────────────────────────────────────────────────── */
+
+.j-glow--must {
+  box-shadow: 0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);
+  animation: j-glow-pulse 1.6s ease-in-out infinite;
+}
+.j-glow--should {
+  box-shadow: 0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);
+  animation: j-glow-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes j-glow-pulse {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1; }
+}
+
+
+/* ── Utility ──────────────────────────────────────────────────────────── */
+
+.j-flex       { display: flex; }
+.j-flex-col   { display: flex; flex-direction: column; }
+.j-flex-wrap  { flex-wrap: wrap; }
+.j-items-center { align-items: center; }
+.j-justify-center { justify-content: center; }
+.j-gap-xs     { gap: var(--j-space-xs); }
+.j-gap-sm     { gap: var(--j-space-sm); }
+.j-gap-md     { gap: var(--j-space-md); }
+.j-gap-lg     { gap: var(--j-space-lg); }
+.j-gap-xl     { gap: var(--j-space-xl); }
+.j-w-full     { width: 100%; }
+.j-shrink-0   { flex-shrink: 0; }
+.j-flex-1     { flex: 1; }
+.j-min-w-0    { min-width: 0; }
+.j-text-center { text-align: center; }
+.j-overflow-hidden { overflow: hidden; }
+.j-overflow-auto   { overflow: auto; }
+.j-relative   { position: relative; }
+
+/* Tone border utilities */
+.j-border--red    { border-color: var(--j-red); }
+.j-border--blue   { border-color: var(--j-blue); }
+.j-border--green  { border-color: var(--j-green); }
+.j-border--gold   { border-color: var(--j-gold); }
+.j-border--orange { border-color: var(--j-orange); }
+.j-border--purple { border-color: var(--j-purple); }
+
+/* Tone background utilities */
+.j-bg--red       { background-color: var(--j-red); }
+.j-bg--blue      { background-color: var(--j-blue); }
+.j-bg--green     { background-color: var(--j-green); }
+.j-bg--gold      { background-color: var(--j-gold); }
+.j-bg--orange    { background-color: var(--j-orange); }
+.j-bg--purple    { background-color: var(--j-purple); }
+.j-bg--dark-grey { background-color: var(--j-dark-grey); }
+.j-bg--darkest   { background-color: var(--j-darkest); }
+
+/* ── App Shell ────────────────────────────────────────────────────────── */
+/* Mobile-first 375px layout container for ALL Jimbo UI screens.
+ * Supports container queries for responsive breakpoints:
+ *   compact  ≤400px  — iPhone SE, fixed 667px height, NO scroll
+ *   cozy     401-750px — MCP inline / wider phones, flexible height, scroll OK
+ *   wide     751px+  — tablet/desktop, two-column layouts (future)
+ *
+ * Default = compact (hard lock). Add .j-app--fluid to unlock for MCP/desktop.
+ */
+
+.j-app {
+  container-type: inline-size;
+  container-name: jimbo;
+  width: 375px;
+  max-width: 375px;
+  height: 667px;
+  max-height: 667px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  background: var(--j-darkest);
+  font-family: var(--j-font);
+  color: var(--j-white);
+  overflow: hidden;
+  position: relative;
+}
+
+/* Fluid modifier — unlocks the container for MCP / desktop contexts. */
+.j-app--fluid {
+  width: 100%;
+  max-width: 750px;
+  height: auto;
+  max-height: none;
+  min-height: 400px;
+}
+
+.j-app__content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
+  display: flex;
+  flex-direction: column;
+}
+
+.j-app__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.j-app__scroll::-webkit-scrollbar { display: none; }
+
+.j-app__footer {
+  flex-shrink: 0;
+  padding: var(--j-space-md) var(--j-space-lg) var(--j-space-md);
+  border-top: 2px solid var(--j-black);
+  background: var(--j-dark-grey);
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-sm);
+}
+
+/* ── Cozy Breakpoint (401px+) ──────────────────────────────────────── */
+/* Only activates when j-app--fluid is used AND container is wide enough. */
+
+@container jimbo (min-width: 401px) {
+  .j-app__content {
+    padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
+  }
+  .j-app__scroll {
+    padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
+  }
+  .j-app__footer {
+    padding: var(--j-space-md) var(--j-space-xl) var(--j-space-lg);
+  }
+}
+
+@container jimbo (min-width: 401px) {
+  .j-stat-grid__value {
+    font-size: 20px;
+  }
+  .j-info-card {
+    padding: var(--j-space-md) var(--j-space-lg);
+  }
+  .j-info-card__title {
+    font-size: 14px;
+  }
+  .j-section-header__tag {
+    font-size: 12px;
+  }
+}
+
+
+/* ── Section Header ──────────────────────────────────────────────────── */
+/* Colored tag + horizontal rule — reusable section divider. */
+
+.j-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--j-space-md);
+  margin-bottom: var(--j-space-md);
+}
+
+.j-section-header__tag {
+  font-family: var(--j-font);
+  font-size: 11px;
+  letter-spacing: 2px;
+  padding: 2px 8px;
+  color: var(--j-white);
+  border-radius: 3px;
+  text-shadow: var(--j-text-shadow);
+  flex-shrink: 0;
+}
+
+.j-section-header__rule {
+  flex: 1;
+  height: 2px;
+  border-radius: 1px;
+  opacity: 0.33;
+}
+
+
+/* ── Stat Grid ───────────────────────────────────────────────────────── */
+/* 3-column stat bar — reusable primitive. */
+
+.j-stat-grid {
+  background: var(--j-dark-grey);
+  border-radius: var(--j-radius-md);
+  padding: var(--j-space-md);
+  border: 2px solid var(--j-panel-edge);
+  box-shadow: 0 2px 0 var(--j-black);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--j-space-md);
+  text-align: center;
+}
+
+.j-stat-grid__value {
+  font-family: var(--j-font);
+  font-size: 16px;
+  color: var(--j-gold-text);
+  text-shadow: var(--j-text-shadow);
+}
+
+.j-stat-grid__label {
+  font-family: var(--j-font);
+  font-size: 9px;
+  color: var(--j-grey);
+  letter-spacing: 2px;
+  margin-top: 2px;
+}
+
+
+/* ── Info Card ───────────────────────────────────────────────────────── */
+/* Generic clickable row card — used for filter lists, seed lists, etc. */
+
+.j-info-card {
+  background: var(--j-dark-grey);
+  border-radius: var(--j-radius-md);
+  padding: var(--j-space-md);
+  box-shadow: 0 2px 0 var(--j-black);
+  display: flex;
+  align-items: center;
+  gap: var(--j-space-md);
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+.j-info-card:hover {
+  filter: brightness(1.08);
+}
+
+.j-info-card__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.j-info-card__title {
+  font-family: var(--j-font);
+  font-size: 13px;
+  color: var(--j-white);
+  letter-spacing: 1px;
+  text-shadow: var(--j-text-shadow);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.j-info-card__sub {
+  font-family: var(--j-font);
+  font-size: 9px;
+  color: var(--j-gold-text);
+  letter-spacing: 1px;
+  margin-top: 2px;
+}
+
+.j-info-card__aside {
+  text-align: right;
+  flex-shrink: 0;
+}
+
+
+/* ── Inset Box ───────────────────────────────────────────────────────── */
+/* Dark recessed content area — for log output, recent finds, etc. */
+
+.j-inset {
+  background: var(--j-dark-grey);
+  border-radius: var(--j-radius-md);
+  padding: var(--j-space-md) var(--j-space-md);
+  border: 2px solid var(--j-panel-edge);
+  box-shadow: 0 2px 0 var(--j-black);
+  font-family: var(--j-font);
+  font-size: 11px;
+  color: var(--j-grey);
+  letter-spacing: 1px;
+  line-height: 1.7;
+}
+
+
+/* ── Wordmark ────────────────────────────────────────────────────────── */
+/* Title + subtitle hero block. */
+
+.j-wordmark {
+  text-align: center;
+  margin-bottom: var(--j-space-xl);
+}
+
+.j-wordmark__title {
+  font-family: var(--j-font);
+  font-size: 32px;
+  letter-spacing: 3px;
+  line-height: 1;
+  color: var(--j-gold-text);
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
+}
+
+.j-wordmark__sub {
+  font-family: var(--j-font);
+  font-size: 14px;
+  letter-spacing: 4px;
+  color: var(--j-grey);
+  margin-top: 4px;
+  text-shadow: var(--j-text-shadow);
+}
+
+
+/* ── Seed Input ───────────────────────────────────────────────────────── */
+
+.j-seed-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-sm);
+}
+
+.j-seed-input__field {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: var(--j-radius-md);
+  border: 2px solid var(--j-panel-edge);
+  background: var(--j-darkest);
+  color: var(--j-gold-text);
+  font-size: 18px;
+  font-family: var(--j-font);
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-shadow: var(--j-text-shadow);
+  outline: none;
+  transition: border-color 100ms ease;
+  box-sizing: border-box;
+}
+.j-seed-input__field::placeholder {
+  color: var(--j-grey);
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 12px;
+}
+.j-seed-input__field:focus {
+  border-color: var(--j-gold);
+}
+.j-seed-input__field[data-valid="true"] {
+  border-color: var(--j-green);
+}
+.j-seed-input__field[data-valid="false"] {
+  border-color: var(--j-red);
+}
+.j-seed-input__field[data-valid="partial"] {
+  border-color: var(--j-panel-edge);
+}
+
+.j-seed-input__hint {
+  font-family: var(--j-font);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  color: var(--j-grey);
+  text-shadow: var(--j-text-shadow);
+}
+
+
+/* ── Aesthetic Selector ──────────────────────────────────────────────── */
+
+.j-aesthetic-selector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-sm);
+}
+
+.j-aesthetic-selector__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--j-space-sm);
+}
+
+.j-aesthetic-pill {
+  padding: 4px 10px;
+  border-radius: var(--j-radius-md);
+  border: 2px solid var(--j-panel-edge);
+  background: var(--j-darkest);
+  color: var(--j-grey);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: var(--j-font);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  text-shadow: var(--j-text-shadow);
+  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
+}
+.j-aesthetic-pill:hover {
+  border-color: var(--j-gold);
+  color: var(--j-gold-text);
+}
+.j-aesthetic-pill[data-active="true"] {
+  border-color: var(--j-gold);
+  background: rgba(228, 182, 67, 0.13);
+  color: var(--j-gold-text);
+  box-shadow: 0 0 0 1px var(--j-gold), 0 2px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+
+/* ── Showcase ─────────────────────────────────────────────────────────── */
+
+.j-showcase {
+  width: 100%;
+  height: 100%;
+  background: var(--j-darkest);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--j-font);
+  color: var(--j-white);
+  overflow: hidden;
+}
+
+.j-showcase__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px 14px 10px;
+}
+
+.j-showcase__wordmark {
+  text-align: center;
+  margin-bottom: 18px;
+}
+
+.j-showcase__wordmark-title {
+  font-size: 32px;
+  letter-spacing: 3px;
+  line-height: 1;
+  color: var(--j-gold-text);
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
+}
+
+.j-showcase__wordmark-sub {
+  font-size: 14px;
+  letter-spacing: 4px;
+  color: var(--j-grey);
+  margin-top: 4px;
+  text-shadow: var(--j-text-shadow);
+}
+
+.j-showcase__stats {
+  background: var(--j-dark-grey);
+  border-radius: var(--j-radius-md);
+  padding: 10px;
+  border: 2px solid var(--j-panel-edge);
+  box-shadow: 0 2px 0 var(--j-black);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--j-space-md);
+  text-align: center;
+  margin-bottom: var(--j-space-xl);
+}
+
+.j-showcase__stat-value {
+  font-size: 16px;
+  color: var(--j-gold-text);
+  text-shadow: var(--j-text-shadow);
+}
+
+.j-showcase__stat-label {
+  font-size: 9px;
+  color: var(--j-grey);
+  letter-spacing: 2px;
+  margin-top: 2px;
+}
+
+.j-showcase__section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--j-space-md);
+  margin-bottom: var(--j-space-md);
+}
+
+.j-showcase__section-tag {
+  font-size: 11px;
+  letter-spacing: 2px;
+  padding: 2px 8px;
+  color: var(--j-white);
+  border-radius: 3px;
+  text-shadow: var(--j-text-shadow);
+}
+
+.j-showcase__section-rule {
+  flex: 1;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.j-showcase__filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-md);
+  margin-bottom: var(--j-space-xl);
+}
+
+.j-showcase__filter-card {
+  background: var(--j-dark-grey);
+  border-radius: var(--j-radius-md);
+  padding: 10px;
+  box-shadow: 0 2px 0 var(--j-black);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.j-showcase__filter-sprites {
+  display: flex;
+  gap: 2px;
+}
+
+.j-showcase__filter-sprite {
+  width: 30px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-showcase__filter-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.j-showcase__filter-name {
+  font-size: 13px;
+  color: var(--j-white);
+  letter-spacing: 1px;
+  text-shadow: var(--j-text-shadow);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.j-showcase__filter-author {
+  font-size: 9px;
+  color: var(--j-gold-text);
+  letter-spacing: 1px;
+  margin-top: 2px;
+}
+
+.j-showcase__filter-hits {
+  text-align: right;
+}
+
+.j-showcase__filter-hits-value {
+  font-size: 14px;
+  text-shadow: var(--j-text-shadow);
+}
+
+.j-showcase__filter-hits-label {
+  font-size: 8px;
+  color: var(--j-grey);
+  letter-spacing: 1px;
+}
+
+.j-showcase__recent {
+  background: var(--j-dark-grey);
+  border-radius: var(--j-radius-md);
+  padding: 8px 10px;
+  border: 2px solid var(--j-panel-edge);
+  box-shadow: 0 2px 0 var(--j-black);
+  font-size: 11px;
+  color: var(--j-grey);
+  letter-spacing: 1px;
+  line-height: 1.7;
+}
+
+.j-showcase__actions {
+  padding: 8px 10px 10px;
+  border-top: 2px solid var(--j-black);
+  background: var(--j-dark-grey);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+
+/* ── Footer suit animation ────────────────────────────────────────────── */
+
+.j-footer__suits {
+  display: inline-flex;
+  align-items: center;
+}
+
+.j-footer__suit-stage {
+  position: relative;
+  display: inline-block;
+  width: 1.5em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.j-footer__suit-char {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  animation-duration: 5s;
+  animation-delay: 0s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-out;
+}
+
+
+/* ── Copy row label ───────────────────────────────────────────────────── */
+
+.j-copy-row__label {
+  letter-spacing: 2px;
+}
+
+
+/* ── Motely version badge ─────────────────────────────────────────────── */
+
+.j-motely-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.j-motely-badge--chip {
+  padding: 3px 8px;
+  border-radius: var(--j-radius-sm);
+  background: var(--j-darkest);
+  border: 1px solid var(--j-panel-edge);
+}
+
+/* ── Font Dance Animation ─────────────────────────────────────────────── */
+
+@keyframes j-font-dance {
+  0%   { transform: translateY(0); }
+  25%  { transform: translateY(-1px); }
+  50%  { transform: translateY(0); }
+  75%  { transform: translateY(1px); }
+  100% { transform: translateY(0); }
+}
+
+.j-text--dance-container {
+  display: inline-flex;
+}
+
+.j-font-dance-char {
+  display: inline-block;
+  animation: j-font-dance 3s infinite ease-in-out;
+}
+
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.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; }