/* The site's tooltip (NyxTip.js): a node's look - the deep ground, a thin accent edge, its corner cut and lit, a mono
   heading -, its arrow at the element; in from its element's side. data-side is where it stands by the element. */
.nyx-tip { position: fixed; z-index: 2000; left: var(--tip-x, 0); top: var(--tip-y, 0); width: max-content; max-width: min(320px, calc(100vw - 16px));
    pointer-events: none; opacity: 0; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .08));
    --tip-shift: 0, 4px; --tip-cut: 8px; }
.nyx-tip[hidden] { display: none; }
.nyx-tip[data-side="bottom"] { --tip-shift: 0, -4px; }
.nyx-tip[data-side="left"] { --tip-shift: 4px, 0; }
.nyx-tip[data-side="right"] { --tip-shift: -4px, 0; }
.nyx-tip { transform: translate(var(--tip-shift)); }
.nyx-tip.is-on { opacity: 1; transform: none; transition: opacity .12s var(--ease-out), transform .12s var(--ease-out); }

.nyx-tip-box { position: relative; display: grid; gap: 4px; padding: 8px 12px 9px; border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--tip-cut)) 0, 100% var(--tip-cut), 100% 100%, 0 100%);
    background: linear-gradient(180deg, var(--deep-glow), var(--deep) 70%); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .36), inset 2px 0 0 rgba(var(--accent-rgb), .7);
    color: var(--text); font: 500 12px/1.5 var(--font); text-align: left; overflow-wrap: anywhere; white-space: pre-line; }
/* (the cut corner's edge, lit) */
.nyx-tip-box::after { content: ''; position: absolute; top: 0; right: 0; width: var(--tip-cut); height: var(--tip-cut);
    background: linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(var(--accent-rgb), .8) calc(50% - 1px), rgba(var(--accent-rgb), .8) calc(50% + .5px), transparent calc(50% + .5px)); }
.nyx-tip-head { color: var(--accent); font: 700 10.5px/1.35 var(--font-mono); letter-spacing: .6px; text-transform: uppercase; }
.nyx-tip-head[hidden] { display: none; }
.nyx-tip-text { color: var(--text); }
.nyx-tip-head:not([hidden]) + .nyx-tip-text { color: var(--muted); }

/* (the arrow: a small square turned, its two outer sides edged, at the element's middle) */
.nyx-tip-arrow { position: absolute; z-index: 1; width: 8px; height: 8px; background: var(--deep); border: 0 solid rgba(var(--accent-rgb), .5); }
.nyx-tip[data-side="top"] .nyx-tip-arrow { left: var(--tip-arrow); bottom: -4px; margin-left: -4px; transform: rotate(45deg); border-right-width: 1px; border-bottom-width: 1px; }
.nyx-tip[data-side="bottom"] .nyx-tip-arrow { left: var(--tip-arrow); top: -4px; margin-left: -4px; transform: rotate(45deg); border-left-width: 1px; border-top-width: 1px; background: var(--deep-glow); }
.nyx-tip[data-side="right"] .nyx-tip-arrow { top: var(--tip-arrow); left: -4px; margin-top: -4px; transform: rotate(45deg); border-left-width: 1px; border-bottom-width: 1px; }
.nyx-tip[data-side="left"] .nyx-tip-arrow { top: var(--tip-arrow); right: -4px; margin-top: -4px; transform: rotate(45deg); border-right-width: 1px; border-top-width: 1px; }

/* (a card's own fingerprint tooltip - NyxGame.css - steps aside while one of its parts says what it is) */
:root.is-tipping .fingerprint-tip.fingerprint-tip.fingerprint-tip { opacity: 0; visibility: hidden; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .nyx-tip, .nyx-tip.is-on { transform: none; transition: none; }
}