.vle-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.vle-overlay *,
.vle-overlay *::before,
.vle-overlay *::after { box-sizing: border-box; }

.vle-effect {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(118px, 32vw);
  min-height: 38px;
  padding: 4px 8px 4px 4px;
  overflow: hidden;
  border: 2px solid var(--vle-edge, #76583d);
  border-radius: 10px 8px 10px 8px;
  background:
    linear-gradient(135deg, #fff8dfed, #f0dfbded);
  box-shadow: inset 0 1px #fffbd8, 0 3px 0 #503c30a6, 0 5px 12px #20352d36;
  color: var(--vle-ink, #35564a);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(.97);
  transition: opacity .18s ease, transform .18s steps(2, end);
  white-space: nowrap;
}

.vle-effect[hidden] { display: none !important; }
.vle-effect:not([hidden]) { opacity: 1; transform: translateY(0) scale(1); }

.vle-effect[data-anchor="top-left"] { top: clamp(7px, 1.8vw, 13px); left: clamp(7px, 1.8vw, 13px); }
.vle-effect[data-anchor="top-right"] { top: clamp(7px, 1.8vw, 13px); right: clamp(7px, 1.8vw, 13px); }
.vle-effect[data-anchor="bottom-left"] { bottom: clamp(7px, 1.8vw, 13px); left: clamp(7px, 1.8vw, 13px); }
.vle-effect[data-anchor="bottom-right"] { right: clamp(7px, 1.8vw, 13px); bottom: clamp(7px, 1.8vw, 13px); }

.vle-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 27px;
  height: 27px;
  overflow: hidden;
  border: 1px solid #806143;
  border-radius: 6px;
  background: var(--vle-icon-bg, #e9d59e);
  box-shadow: inset 0 1px #fff8d4, 0 2px 0 #76533770;
}

.vle-icon svg { display: block; width: 24px; height: 24px; shape-rendering: crispEdges; }
.vle-phrase { overflow: hidden; font: 900 clamp(9px, 2.45vw, 11px)/1.15 "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; letter-spacing: -.045em; text-overflow: ellipsis; }

.vle-effect[data-look-id="pung-ribbons"] { --vle-edge: #815243; --vle-ink: #593f39; --vle-icon-bg: #efe0bd; }
.vle-effect[data-look-id="scarecrow-hat"] { --vle-edge: #72593c; --vle-ink: #4b5941; --vle-icon-bg: #e9d4a0; }
.vle-effect[data-look-id="tree-lanterns"] { --vle-edge: #604534; --vle-ink: #574333; --vle-icon-bg: #f2d887; }
.vle-effect[data-look-id="horse-tassel"] { --vle-edge: #7c493e; --vle-ink: #654039; --vle-icon-bg: #efd3a0; }
.vle-effect[data-look-id="stall-awning"] { --vle-edge: #805444; --vle-ink: #66463b; --vle-icon-bg: #f0d7a5; }
.vle-effect[data-look-id="chest-colors"] { --vle-edge: #6d4a32; --vle-ink: #5f4735; --vle-icon-bg: #e6c17d; }
.vle-effect[data-look-id="quest-banner"] { --vle-edge: #71513d; --vle-ink: #4c5b4c; --vle-icon-bg: #e9d8ab; }
.vle-effect[data-look-id="bonfire-flowers"] { --vle-edge: #815040; --vle-ink: #6b423c; --vle-icon-bg: #f2d9a1; }
.vle-effect[data-look-id="field-rattle"] { --vle-edge: #6f5b39; --vle-ink: #4b6047; --vle-icon-bg: #ead69c; }

@media (max-width: 460px) {
  .vle-effect {
    gap: 4px;
    max-width: min(112px, 33vw);
    min-height: 33px;
    padding: 3px 6px 3px 3px;
    border-width: 1.5px;
    border-radius: 8px 7px 8px 7px;
  }

  .vle-icon { width: 23px; height: 23px; border-radius: 5px; }
  .vle-icon svg { width: 21px; height: 21px; }
  .vle-phrase { font-size: clamp(8px, 2.55vw, 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .vle-effect { transition: none; transform: none; }
  .vle-effect:not([hidden]) { transform: none; }
}