/* Garage Days line boil for UI strokes (art frames are swapped by boil.js).
   The 2-3px ink borders wobble through the SVG filter #boil (feTurbulence + feDisplacementMap),
   whose seed boil.js steps at 8 fps. Text must stay crisp, so the filter never touches a box with
   text in it: the real border goes transparent and a ::before copy of it (same width, style and
   radius) carries the filter. Only text-free graphics (.pie svg, .avatar portrait) are filtered
   directly. Everything is off under prefers-reduced-motion and when html[data-boil="off"]. */

@media (prefers-reduced-motion: no-preference) {
  /* hosts need a containing block for the border copy; :where() keeps this overridable */
  html:not([data-boil="off"]) :where(.bubble, .btn, .chart-card, .news, .strip, .stk, .ch-row, .next-card,
    .unlock-card, .hold, .scrub, .pocket, .table, .callout):not(.sticker-toast) { position: relative; }

  html:not([data-boil="off"]) :is(.bubble, .btn, .chart-card, .news, .strip, .stk, .ch-row, .next-card,
    .unlock-card, .sticker-toast, .hold, .scrub, .pocket, .table, .callout) {
    /* the fill stays under the (now transparent) border, so when the copy wobbles inward it sits
       on the fill and when it wobbles outward no white gap opens between ink and fill */
    border-color: transparent !important;
    --boil-bw: 2.5px;
  }
  html:not([data-boil="off"]) :is(.ch-row) { --boil-bw: 2px; }
  html:not([data-boil="off"]) :is(.sticker-toast, .hold) { --boil-bw: 3px; }

  html:not([data-boil="off"]) :is(.bubble, .btn, .chart-card, .news, .strip, .stk, .ch-row, .next-card,
    .unlock-card, .sticker-toast, .hold, .scrub, .pocket, .table, .callout)::before {
    content: "";
    position: absolute;
    inset: calc(var(--boil-bw) * -1);
    border-width: inherit;
    border-style: inherit;
    border-color: var(--boil-ink, #111111);
    border-radius: inherit;
    pointer-events: none;
    filter: url(#boil);
  }
  /* overflow:hidden would clip a copy that sits outside the padding box: draw it just inside */
  html:not([data-boil="off"]) .table::before { inset: 0; z-index: 1; }

  /* text-free graphics: filter the element itself */
  html:not([data-boil="off"]) :is(.pie, .avatar:not(.you)) { filter: url(#boil); }
  /* the "You" avatar is a word, not a picture: boil a border copy instead */
  html:not([data-boil="off"]) .avatar.you { position: relative; overflow: visible; border-color: transparent !important; }
  html:not([data-boil="off"]) .avatar.you::before {
    content: ""; position: absolute; inset: -2.5px; border: 2.5px solid var(--boil-ink, #111111);
    border-radius: inherit; pointer-events: none; filter: url(#boil);
  }
}