/* One-time hints (web/static/js/hints.js). One line, anchored by a caret to the
   control it is about. Colours come from the theme tokens, so Classic, Cinema,
   Black Spring and Battle.net each restyle it without rules of their own.

   The box lets clicks through to whatever is under it; only the close button
   takes the pointer. A hint must never be the thing standing between a player
   and a control. No transition on position: the box follows its target every
   frame, and a moving box that lags behind could brush a Twitch iframe. */
.ch-hint {
  position: fixed;
  z-index: 10200;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 4px 4px 4px 10px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--cta);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}
.ch-hint[hidden] { display: none; }
.ch-hint-text { flex: 1 1 auto; min-width: 0; }
.ch-hint-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.ch-hint-close:hover { color: var(--text); background: var(--bg-input); }
.ch-hint-close:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }

/* The caret: a square turned 45 degrees, bordered on the two sides facing the
   target. --caret is its distance along the edge (set by hints.js). */
.ch-hint::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--bg-card);
  border: 1px solid var(--cta);
}
.ch-hint[data-side="top"]::after {
  left: var(--caret, 50%); bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  border-top: 0; border-left: 0;
}
.ch-hint[data-side="bottom"]::after {
  left: var(--caret, 50%); top: -5px;
  transform: translateX(-50%) rotate(45deg);
  border-bottom: 0; border-right: 0;
}
.ch-hint[data-side="left"]::after {
  top: var(--caret, 50%); right: -5px;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 0; border-left: 0;
}
.ch-hint[data-side="right"]::after {
  top: var(--caret, 50%); left: -5px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 0; border-right: 0;
}

/* Fade in only; nothing moves. Off entirely for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ch-hint:not([hidden]) { animation: ch-hint-in 140ms ease-out; }
}
@keyframes ch-hint-in { from { opacity: 0; } to { opacity: 1; } }

/* "What's new" dot: the changelog is newer than the one this browser opened. */
#nav-options.has-update,
#opt-view-changelog.has-update { position: relative; }
#nav-options.has-update::after,
#opts-nav .opts-nav-btn.has-update::after,
#opt-view-changelog.has-update::after {
  content: '';
  position: absolute;
  top: 1px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cta);
}
#opt-view-changelog.has-update::after { top: 3px; right: 3px; }
/* Inside the link's own padding (10px desktop, 6px phone), at the word's corner. */
#nav-options.has-update::after { top: 4px; right: 1px; }
/* The section tab is full width: the dot follows the word, not the edge. */
#opts-nav .opts-nav-btn.has-update::after {
  position: static;
  display: inline-block;
  margin-left: 6px;
  vertical-align: 2px;
}