/* frontend/edge-hints.css — EdgeHints' chevrons (edge-hints.js; docs/ui-components.md).
 * The FADE is a mask-image the script writes on the view itself; this file only draws the chevrons.
 * Theming: --eh-ink (glyph), --eh-bg (chip), --eh-line (rim) on the host or any ancestor; the hot state's HintArrow
 * takes --ha-color / --ha-glow from the same place (set them to the game's selection colour).
 * ⛔ A chevron is an OVERLAY on the host — it never takes layout space, so showing one never moves anything. */
.eh-host { isolation: isolate; }
.eh-chev {
  position: absolute; z-index: 6; display: none; align-items: center; justify-content: center;
  width: 24px; height: 34px; padding: 0; margin: 0; overflow: visible;
  border: 1px solid var(--eh-line, rgba(255, 255, 255, .16)); border-radius: 999px;
  background: var(--eh-bg, rgba(12, 13, 16, .72)); color: var(--eh-ink, #e9e8e4);
  font: 800 17px/1 system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: filter .12s, transform .12s, opacity .14s;
}
.eh-chev[data-on="1"] { display: flex; }
.eh-chev[data-edge="left"]   { left: 2px;  top: 50%; translate: 0 -50%; }
.eh-chev[data-edge="right"]  { right: 2px; top: 50%; translate: 0 -50%; }
.eh-chev[data-edge="top"]    { top: 2px;    left: 50%; translate: -50% 0; width: 34px; height: 22px; }
.eh-chev[data-edge="bottom"] { bottom: 2px; left: 50%; translate: -50% 0; width: 34px; height: 22px; }
.eh-chev[data-edge="top"] .eh-glyph, .eh-chev[data-edge="bottom"] .eh-glyph { rotate: 90deg; }
.eh-chev:active { filter: brightness(.88); transform: scale(.94); }
@media (hover: hover) { .eh-chev:hover { filter: brightness(1.18); } }
/* HOT: the chevron hands over to the shared HintArrow (bobbing, in the game's --ha-color); the chip stays the tap target */
.eh-chev[data-hot="1"] { background: transparent; border-color: transparent; box-shadow: none; }
.eh-chev[data-hot="1"] .eh-glyph { visibility: hidden; }
/* the arrow's anchor: a 2 px dot at the chevron's OUTER edge, so the arrow (drawn beside it) points out of the view */
.eh-anchor { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.eh-chev[data-edge="left"] .eh-anchor   { left: 0;  top: 50%; margin-top: -1px; }
.eh-chev[data-edge="right"] .eh-anchor  { right: 0; top: 50%; margin-top: -1px; }
.eh-chev[data-edge="top"] .eh-anchor    { top: 0;    left: 50%; margin-left: -1px; }
.eh-chev[data-edge="bottom"] .eh-anchor { bottom: 0; left: 50%; margin-left: -1px; }
@media (prefers-reduced-motion: reduce) { .eh-chev { transition: none; } }