/* ============================================================= MASTERSETS — COMIC TOOLTIP ------------------------------------------------------------- One shared bubble element (#ms-tip) is appended to by js/comic-tooltip.js and repositioned for whichever element is hovered. The hand-drawn outline is an SVG path drawn to the measured pixel size on every show, so nothing stretches and the text stays crisp. Colours come from tokens.css. ============================================================= */ #ms-tip { position: fixed; z-index: 2000; left: 0; top: 0; padding: 9px 13px; max-width: 240px; pointer-events: none; opacity: 0; transform: translateY(6px) scale(0.94); transition: opacity 0.16s ease, transform 0.16s ease; font-family: var(--ms-tip-font); font-size: 0.95rem; line-height: 1.25; color: var(--ms-tip-text); text-align: left; white-space: normal; overflow-wrap: anywhere; } #ms-tip.is-on { opacity: 1; transform: translateY(0) scale(1); } #ms-tip.is-below { transform: translateY(-6px) scale(0.94); } #ms-tip.is-below.is-on { transform: translateY(0) scale(1); } #ms-tip svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; } #ms-tip .ms-tip-text { position: relative; z-index: 1; } #ms-tip .ms-tip-sub { display: block; font-size: 0.82em; color: var(--ms-tip-text-sub); } @media (prefers-reduced-motion: reduce) { #ms-tip { transition: opacity 0.1s linear; transform: none; } #ms-tip.is-on { transform: none; } }