.gloss {
  border-bottom: 1px dotted var(--primary-fixed-dim, #d68a00);
  cursor: help;
  text-decoration: none;
  color: inherit;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.gloss:hover,
.gloss:focus {
  color: var(--primary, #ffb000);
  border-bottom-color: var(--primary, #ffb000);
}

.gloss-bubble {
  position: absolute;
  z-index: 10000;
  max-width: 320px;
  padding: 14px 16px;
  background: var(--surface-container-high, #242118);
  color: var(--on-surface, #f2ebdc);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.gloss-bubble.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gloss-bubble-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary, #ffb000);
  margin-bottom: 4px;
}
.gloss-bubble p {
  margin: 0 0 10px 0;
  color: var(--on-surface, #f2ebdc);
}
.gloss-bubble-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--primary-fixed-dim, #d68a00);
  text-decoration: none;
}
.gloss-bubble-link:hover {
  color: var(--primary, #ffb000);
}

[data-theme="light"] .gloss-bubble {
  background: #fff;
  color: #1a1814;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .gloss-bubble p {
  color: #2a2820;
}

@media (max-width: 600px) {
  .gloss-bubble {
    max-width: calc(100vw - 24px);
  }
}