/* web/assets/icons/icons.css — the icon family's own stylesheet.
   Art pass 2026-09-07, segment 10 (UI, HUD & 2D art).

   Two jobs:

   1. `.cli` — the base rule every glyph from web/assets/icons/icons.js
      renders under. An icon inherits `currentColor` and never carries a
      colour of its own, which is what lets one sprite sit on the dark HUD,
      on a light store card and inside an accent-filled button
      (docs/ART-BIBLE.md §2.1: #FFCF6B is the ONLY pointing colour).

   2. THE EMOJI RETIREMENT for modules this segment does not own.
      web/interact.js (the STREET interaction bar and the Sit/Follow/Stay/
      Play quick actions) belongs to the web-client lane, and its buttons
      still put an emoji character in the DOM. Rather than edit that file,
      the rules below hide the character and paint the matching glyph as a
      CSS mask on the same element — presentation only, no DOM, no ids, no
      behaviour touched. The one-line change that lane can make instead
      (import { COMMAND_ICON, icon } and drop the emoji) is written up under
      "Segment 10" in docs/HANDOFF-NOTES.md; when it lands these rules
      become dead weight and can be deleted.

   Loaded last in web/index.html so it wins over style.css / games.css /
   skills.css / build-mode.css / create.css. */

/* ------------------------------------------------------------ 1. the glyph */
.cli {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* A 24px-grid glyph goes thin above ~32px (05-layout-study rule 3), so the
   two sizes we ever draw large get a heavier stroke instead of a scale. */
.cli[width="28"], .cli[width="32"] { stroke-width: 1.85; }
.cli[width="40"], .cli[width="44"], .cli[width="56"] { stroke-width: 1.6; }

/* ------------------------------------------- 2. web/interact.js, restyled */

/* The interaction bar (Pet · Play · Feed · Treat · Call · Groom · Talk ·
   Train). `.interactIcon` still contains the emoji character; font-size 0
   collapses it to nothing while leaving textContent intact for anything
   that reads it back. */
.interactBtn .interactIcon {
  font-size: 0 !important;
  line-height: 0;
  display: grid;
  place-items: center;
}
.interactBtn .interactIcon::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background-color: var(--ink);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  transition: background-color 0.14s ease;
}
.interactBtn:hover:not(:disabled) .interactIcon::before { background-color: var(--accent); }
.interactBtn:disabled .interactIcon::before { background-color: var(--muted); }

/* The four STREET quick actions. Brian's skins-sheet reference
   (docs/reference/README.md, "Skin tiers reference") ends with "four round
   white-icon buttons under them labelled Sit · Follow · Stay · Play" — so
   the glyph is Paper #FBF8EF on glass, 24px on a 60px hit target, and the
   ACTIVE state is the solid accent with accent-ink on top (04-layout-study,
   "Active button = solid --accent #FFCF6B with --accent-ink glyph"). */
#quickActionsBar { gap: 18px; }
.qaBtn .qaCircle {
  width: 60px;
  height: 60px;
  font-size: 0 !important;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    var(--panel);
  border: 1px solid rgba(251, 248, 239, 0.22);
  box-shadow: 0 10px 26px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.10);
}
.qaBtn .qaCircle::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-color: #fbf8ef;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  transition: background-color 0.15s ease;
}
.qaBtn:hover:not(:disabled) .qaCircle {
  border-color: rgba(251, 248, 239, 0.42);
  transform: translateY(-2px);
}
.qaBtn.active .qaCircle {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(255, 207, 107, 0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.qaBtn.active .qaCircle::before { background-color: var(--accent-ink); }
.qaBtn:disabled .qaCircle::before { background-color: rgba(251, 248, 239, 0.55); }
.qaLabel { text-transform: uppercase; letter-spacing: 0.07em; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .qaBtn:hover:not(:disabled) .qaCircle { transform: none; }
}

/* -------------------------------------- the generated mask declarations */
.interactBtn[data-kind="pet"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2011V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%20%2F%3E%3Cpath%20d%3D%22M14%2010V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v2%22%20%2F%3E%3Cpath%20d%3D%22M10%2010.5V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202v8%22%20%2F%3E%3Cpath%20d%3D%22M18%208a2%202%200%201%201%204%200v6a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2011V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%20%2F%3E%3Cpath%20d%3D%22M14%2010V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v2%22%20%2F%3E%3Cpath%20d%3D%22M10%2010.5V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202v8%22%20%2F%3E%3Cpath%20d%3D%22M18%208a2%202%200%201%201%204%200v6a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%20%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-kind="play"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M5.6%205.6A8.9%208.9%200%200%201%209%2012a8.9%208.9%200%200%201-3.4%206.4%22%2F%3E%3Cpath%20d%3D%22M18.4%205.6A8.9%208.9%200%200%200%2015%2012a8.9%208.9%200%200%200%203.4%206.4%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M5.6%205.6A8.9%208.9%200%200%201%209%2012a8.9%208.9%200%200%201-3.4%206.4%22%2F%3E%3Cpath%20d%3D%22M18.4%205.6A8.9%208.9%200%200%200%2015%2012a8.9%208.9%200%200%200%203.4%206.4%22%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-kind="feed"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%20%2F%3E%3Cpath%20d%3D%22M7%202v20%22%20%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%20%2F%3E%3Cpath%20d%3D%22M7%202v20%22%20%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%20%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-kind="treat"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010c.7-.7%201.69%200%202.5%200a2.5%202.5%200%201%200%200-5%20.5.5%200%200%201-.5-.5%202.5%202.5%200%201%200-5%200c0%20.81.7%201.8%200%202.5l-7%207c-.7.7-1.69%200-2.5%200a2.5%202.5%200%200%200%200%205c.28%200%20.5.22.5.5a2.5%202.5%200%201%200%205%200c0-.81-.7-1.8%200-2.5Z%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010c.7-.7%201.69%200%202.5%200a2.5%202.5%200%201%200%200-5%20.5.5%200%200%201-.5-.5%202.5%202.5%200%201%200-5%200c0%20.81.7%201.8%200%202.5l-7%207c-.7.7-1.69%200-2.5%200a2.5%202.5%200%200%200%200%205c.28%200%20.5.22.5.5a2.5%202.5%200%201%200%205%200c0-.81-.7-1.8%200-2.5Z%22%20%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-kind="call"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%20%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%20%2F%3E%3Cpath%20d%3D%22M8%206v8%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%20%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%20%2F%3E%3Cpath%20d%3D%22M8%206v8%22%20%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-kind="groom"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11%2010%203%203%22%20%2F%3E%3Cpath%20d%3D%22M6.5%2021A3.5%203.5%200%201%200%203%2017.5a2.62%202.62%200%200%201-.708%201.792A1%201%200%200%200%203%2021z%22%20%2F%3E%3Cpath%20d%3D%22M9.969%2017.031%2021.378%205.624a1%201%200%200%200-3.002-3.002L6.967%2014.031%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11%2010%203%203%22%20%2F%3E%3Cpath%20d%3D%22M6.5%2021A3.5%203.5%200%201%200%203%2017.5a2.62%202.62%200%200%201-.708%201.792A1%201%200%200%200%203%2021z%22%20%2F%3E%3Cpath%20d%3D%22M9.969%2017.031%2021.378%205.624a1%201%200%200%200-3.002-3.002L6.967%2014.031%22%20%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-kind="talk"] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%20%2F%3E%3C%2Fsvg%3E"); }
.interactBtn[data-train] .interactIcon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%20%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%20%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%20%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%20%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%20%2F%3E%3C%2Fsvg%3E"); }

.qaBtn[data-cmd="sit"] .qaCircle::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%209V6a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v3%22%20%2F%3E%3Cpath%20d%3D%22M2%2016a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-5a2%202%200%200%200-4%200v1.5a.5.5%200%200%201-.5.5h-11a.5.5%200%200%201-.5-.5V11a2%202%200%200%200-4%200z%22%20%2F%3E%3Cpath%20d%3D%22M4%2018v2%22%20%2F%3E%3Cpath%20d%3D%22M20%2018v2%22%20%2F%3E%3Cpath%20d%3D%22M12%204v9%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%209V6a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v3%22%20%2F%3E%3Cpath%20d%3D%22M2%2016a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-5a2%202%200%200%200-4%200v1.5a.5.5%200%200%201-.5.5h-11a.5.5%200%200%201-.5-.5V11a2%202%200%200%200-4%200z%22%20%2F%3E%3Cpath%20d%3D%22M4%2018v2%22%20%2F%3E%3Cpath%20d%3D%22M20%2018v2%22%20%2F%3E%3Cpath%20d%3D%22M12%204v9%22%20%2F%3E%3C%2Fsvg%3E"); }
.qaBtn[data-cmd="follow"] .qaCircle::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016v-2.38C4%2011.5%202.97%2010.5%203%208c.03-2.72%201.49-6%204.5-6C9.37%202%2010%203.8%2010%205.5c0%203.11-2%205.66-2%208.68V16a2%202%200%201%201-4%200Z%22%20%2F%3E%3Cpath%20d%3D%22M20%2020v-2.38c0-2.12%201.03-3.12%201-5.62-.03-2.72-1.49-6-4.5-6C14.63%206%2014%207.8%2014%209.5c0%203.11%202%205.66%202%208.68V20a2%202%200%201%200%204%200Z%22%20%2F%3E%3Cpath%20d%3D%22M16%2017h4%22%20%2F%3E%3Cpath%20d%3D%22M4%2013h4%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016v-2.38C4%2011.5%202.97%2010.5%203%208c.03-2.72%201.49-6%204.5-6C9.37%202%2010%203.8%2010%205.5c0%203.11-2%205.66-2%208.68V16a2%202%200%201%201-4%200Z%22%20%2F%3E%3Cpath%20d%3D%22M20%2020v-2.38c0-2.12%201.03-3.12%201-5.62-.03-2.72-1.49-6-4.5-6C14.63%206%2014%207.8%2014%209.5c0%203.11%202%205.66%202%208.68V20a2%202%200%201%200%204%200Z%22%20%2F%3E%3Cpath%20d%3D%22M16%2017h4%22%20%2F%3E%3Cpath%20d%3D%22M4%2013h4%22%20%2F%3E%3C%2Fsvg%3E"); }
.qaBtn[data-cmd="stay"] .qaCircle::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2011V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%20%2F%3E%3Cpath%20d%3D%22M14%2010V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v2%22%20%2F%3E%3Cpath%20d%3D%22M10%2010.5V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202v8%22%20%2F%3E%3Cpath%20d%3D%22M18%208a2%202%200%201%201%204%200v6a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%20%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2011V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%20%2F%3E%3Cpath%20d%3D%22M14%2010V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v2%22%20%2F%3E%3Cpath%20d%3D%22M10%2010.5V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202v8%22%20%2F%3E%3Cpath%20d%3D%22M18%208a2%202%200%201%201%204%200v6a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%20%2F%3E%3C%2Fsvg%3E"); }
.qaBtn[data-cmd="play"] .qaCircle::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M5.6%205.6A8.9%208.9%200%200%201%209%2012a8.9%208.9%200%200%201-3.4%206.4%22%2F%3E%3Cpath%20d%3D%22M18.4%205.6A8.9%208.9%200%200%200%2015%2012a8.9%208.9%200%200%200%203.4%206.4%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M5.6%205.6A8.9%208.9%200%200%201%209%2012a8.9%208.9%200%200%201-3.4%206.4%22%2F%3E%3Cpath%20d%3D%22M18.4%205.6A8.9%208.9%200%200%200%2015%2012a8.9%208.9%200%200%200%203.4%206.4%22%2F%3E%3C%2Fsvg%3E"); }

/* -------------------------------- the live DOM sweep (deEmojiDom)
   The swapped-in glyph, plus the original emoji character kept
   visually hidden so the parent's textContent never changes. */
.cliSwap { display: inline-flex; align-items: center; position: relative; vertical-align: -0.14em; }
.cliSwapSrc {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
  font-size: 1px; line-height: 1;
}