/* Squircle corners for every rounded surface (CSS Corner Shaping).
   Applies only where the browser supports it; elsewhere the plain radius stands.
   Pills and circles keep a true arc — a superellipse at 999px reads broken. */
@supports (corner-shape: squircle) {
  *, *::before, *::after { corner-shape: squircle; }

  .bb-btn, .bb-tag, .bb-badge, .bb-sticker, .bb-switch, .bb-switch__thumb,
  [style*="border-radius:999px"], [style*="border-radius: 999px"],
  [style*="border-radius:50%"],   [style*="border-radius: 50%"],
  [style*="border-radius:99"],    [style*="border-radius: 99"] {
    corner-shape: round;
  }

  /* the hero's draggable components carry 2–9px radii, where a squircle is invisible.
     lift them to a size the shape can actually read at, pills excepted. */
  [data-piece] [style*="border-radius:2px"], [data-piece] [style*="border-radius:3px"],
  [data-piece] [style*="border-radius:4px"], [data-piece] [style*="border-radius:5px"],
  [data-piece] [style*="border-radius:6px"], [data-piece] [style*="border-radius:8px"],
  [data-piece] [style*="border-radius:9px"], [data-piece] [style*="border-radius:10px"] {
    border-radius: 12px;
  }
}