/* Styles for shared/tooltip.js. Dark parchment bubble; a page can restyle it with its own vars. */
.tipbox {
  position: fixed; z-index: 9000; max-width: 320px; pointer-events: none;
  background: var(--tip-bg, #16110d); color: var(--tip-fg, #ece3d2);
  border: 1px solid var(--tip-line, #6d5326); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.tipbox.show { opacity: 1; transform: none; }
.tipbox b { color: var(--tip-strong, #f0c46a); }
.tipbox .tip-title { font-weight: 700; margin-bottom: 3px; }
.tipbox .tip-sub { color: var(--tip-muted, #a99a83); font-size: 11.5px; }
.tipbox .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.tipbox .good { color: #8fd08a; } .tipbox .bad { color: #e78080; }
.tipbox hr { border: 0; border-top: 1px solid var(--tip-line, #6d5326); margin: 6px 0; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .tipbox { transition: none; } }