/* ══════════════════════════════════════
   SCREEN: READING
   ══════════════════════════════════════ */
.reading-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
  margin-top: 48px;
}
.reading-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}
.reading-body {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--fg-secondary);
  line-height: 1.75;
  margin-bottom: 32px;
}
.reading-body .vocab-word {
  color: var(--primary-600);
  border-bottom: 1.5px dotted var(--primary-300);
  cursor: help;
  position: relative;
}
.dark .reading-body .vocab-word {
  color: var(--primary-400);
  border-bottom-color: var(--primary-300);
}
.vocab-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  z-index: 50;
}
.vocab-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--fg);
}
.vocab-word:hover .vocab-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}