/* Targeted regression fix: typography and token artwork overlays only. */
:root {
  --parallel-font-ui: "IBM Plex Sans", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --parallel-font-mono: "Geist Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

html body,
html body :where(button, input, textarea, select, option, a, p, span, div, h1, h2, h3, h4, h5, h6, label, small, strong, b) {
  font-family: var(--parallel-font-ui) !important;
}

html body :where(.metric-value, .token-age, .token-price, .token-stat-value, .numeric, .number, [data-numeric]) {
  font-family: var(--parallel-font-mono) !important;
  font-variant-numeric: tabular-nums;
}

html body :where(.ri, [class^="ri-"], [class*=" ri-"])::before,
html body :where(.ri, [class^="ri-"], [class*=" ri-"])::after {
  font-family: remixicon !important;
}

/* Keep the artwork unobstructed until the user intentionally hovers it. */
.token-avatar {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

.token-avatar > :where(.token-avatar-camera, .avatar-camera, .camera-badge, .image-camera, [class*="camera"]) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.token-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: rgba(4, 10, 18, 0.56);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7.5 10 5.5h4l1.5 2H19a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.25'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  transition: opacity 140ms ease, visibility 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .token-avatar:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

/* One consistent Sui chain badge, using the saved site asset with an SVG fallback. */
.token-avatar::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 7;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 1px solid #4da2ff;
  border-radius: 50%;
  background-color: #07111d;
  background-image:
    url("./assets/sui-logo.png"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234da2ff' d='M12 1.8C9.4 5.2 4.5 10.5 4.5 15.1A7.5 7.5 0 0 0 19.5 15c0-4.5-4.9-9.8-7.5-13.2Zm0 18.1a4.8 4.8 0 0 1-4.8-4.8c0-2.2 2.1-5.4 4.8-9 2.7 3.6 4.8 6.8 4.8 9a4.8 4.8 0 0 1-4.8 4.8Z'/%3E%3C/svg%3E");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 70% 70%, 70% 70%;
  pointer-events: none;
}

.token-avatar > :where(.token-chain-badge, .sui-badge, .avatar-chain-badge, [class*="sui-badge"]) {
  display: none !important;
}