🐐

style.css

@@ -836,6 +836,25 @@ footer {
   pointer-events: none;
 }
 
+/* Body-text tooltips: dotted underline marks hover info
+   (dashed marks clickable, see .dnd-roll) */
+.text-tip {
+  position: relative;
+  cursor: help;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+/* List variant: newlines (
) in the attribute become line breaks */
+[data-tip].text-tip--list:hover::after,
+[data-tip].text-tip--list:focus-visible::after,
+[data-tip].text-tip--list.tip-open::after {
+  white-space: pre-line;
+  text-align: left;
+  max-width: 300px;
+}
+
 .skills-cards {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -859,7 +878,17 @@ footer {
   position: relative;
   user-select: none;
   -webkit-user-select: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  border-radius: 4px;
+  padding: 0 0.15em;
+  margin: 0 -0.15em;
+  transition: background 150ms ease;
 }
+.dnd-roll:hover { background: var(--pink); }
 .die-scene {
   position: absolute;
   bottom: calc(100% + 10px);