/* ==========================================================================
   Entity peek (.epk-*) — the hover "remind me" card (js/entity-peek.js)
   --------------------------------------------------------------------------
   One washi card for bare KANJI glyphs (kanji-only, owner ruling 2026-07-03
   — word names already carry reading + gloss on every surface). Same paper
   conventions as the play popover (ink-wash-tabs.css): warm card surface,
   faint noise, quiet shadow ring. pointer-events:none — the card is a
   whisper, never a surface. Sits under the 9999 play popover (they never
   coexist) and above the 9300 word panel.
   ========================================================================== */

.entity-peek {
  position: fixed;
  z-index: 9998;
  display: none;
  pointer-events: none;
  max-width: 300px;
  padding: 9px 13px 10px;
  background: var(--card-surface, #FAFAF7);
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(44, 44, 44, 0.09), 0 0 0 1px rgba(44, 44, 44, 0.05);
  opacity: 0;
  transform: translateY(4px);              /* above the anchor: settles upward */
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.entity-peek.epk-below { transform: translateY(-4px); }   /* flipped below: settles downward */
.entity-peek.epk-in { opacity: 1; transform: none; }

/* ── glyph beside keyword + the kun/on line ─────────────────────────────── */
.epk-k { display: flex; align-items: flex-start; gap: 12px; }
.epk-glyph {
  font: 400 34px/1.15 'Klee One', 'Noto Sans JP', sans-serif;
  color: var(--text-primary, #2C2C2C);
  flex: 0 0 auto;
}
.epk-kbody { min-width: 0; padding-top: 2px; }
.epk-kw {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary, #2C2C2C);
}
.epk-reads { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
/* kun indigo · on terracotta — the kanji page's own colour law, no labels */
.epk-r { font: 400 13px/1.35 'Klee One', 'Noto Sans JP', sans-serif; white-space: nowrap; }
.epk-r--kun { color: #3D5A80; }
.epk-r--on  { color: #9E5E43; }
/* romaji in the UI face, not Klee's handwritten latin (inherit here = Klee) */
.epk-r .ro { font-family: var(--font-ui, Inter, sans-serif); font-size: 10px; color: #8a8580; margin-left: 3px; }

@media (prefers-reduced-motion: reduce) {
  .entity-peek { transition: none; }
}