.hu-sp { position: fixed; z-index: 1500; cursor: default; animation: hu-pop .3s steps(3) both; }
.hu-cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; animation: hu-bob 1.2s steps(1) infinite; }
@keyframes hu-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes hu-bob { 50% { transform: translateY(-3px); } }

.hu-bal {
  position: fixed; z-index: 1501; width: max-content; max-width: 260px; padding: 8px 22px 6px 10px;
  background: var(--hu-bg, #ffffe1); border: 1px solid #000; color: #000; font: 11px Tahoma, "MS Sans Serif", sans-serif;
}
.hu-q { margin: 0 0 8px; }
.hu-row { display: flex; gap: 6px; margin-bottom: 6px; }
.hu-n { margin: -4px 0 6px; color: #808080; }
.hu-hl { outline: 2px solid #f00; outline-offset: 1px; animation: hu-hl 1s steps(1) infinite; }
@keyframes hu-hl { 50% { outline-color: #ff0; } }
.hu-bal .btn { min-width: 0; height: 21px; padding: 0 10px; }
.hu-bal .hu-never { display: block; margin-bottom: 2px; }
.hu-x { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: default; }
.hu-x svg { display: block; margin: auto; }
.hu-x:active { box-shadow: var(--pushed); }
.hu-fb { --hu-bg: #fff; max-width: 170px; padding: 5px 8px; border-radius: 8px; pointer-events: none; }

.hu-t1, .hu-t2 { position: absolute; left: var(--hu-tail, 20px); width: 0; height: 0; border: 0 solid transparent; }
.hu-t2 { margin-left: 1px; }
.hu-above .hu-t1 { top: 100%; border-width: 10px 7px 0; border-top-color: #000; }
.hu-above .hu-t2 { top: 100%; border-width: 9px 6px 0; border-top-color: var(--hu-bg, #ffffe1); }
.hu-below .hu-t1 { bottom: 100%; border-width: 0 7px 10px; border-bottom-color: #000; }
.hu-below .hu-t2 { bottom: 100%; border-width: 0 6px 9px; border-bottom-color: var(--hu-bg, #ffffe1); }

.banner .hu-ed { font-size: 11px; font-style: normal; font-weight: normal; }
#scr.off { white-space: pre-line; }
.hu-name { padding: 0 8px 6px; text-align: center; }