/* What a word means (shared/word-info.js): the ⓘ beside an oracle's word and
   the definition it opens. Oracle 3's tiles and bands and Oracle 1's clues. */
/* A thin black edge: in dark mode the tip is the same cream as a chosen tile. */
.cx-tip { position: absolute; z-index: 6; max-width: min(320px, 92%); padding: 8px 11px; border: 1px solid #000; background: var(--text); color: var(--bg); font: 400 13px/1.4 var(--display); text-transform: none; letter-spacing: normal; text-align: left; pointer-events: none; }
.cx-tip b { display: block; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .75; margin-bottom: 2px; }
/* Its hit area reaches past the circle. */
.cx-info { position: relative; width: 15px; height: 15px; display: inline-grid; place-items: center; flex: none; border: 1.2px solid currentColor; border-radius: 50%; font: 700 9.5px/1 var(--mono); text-transform: none; letter-spacing: 0; opacity: .5; cursor: help; }
/* The letter is drawn, not written: a word's text (a band's, when copied) stays the word alone. */
.cx-info::before { content: 'i'; }
.cx-info::after { content: ''; position: absolute; inset: -8px; }
.cx-info:hover { opacity: 1; }