/* ============================================================================
   v14.514 — PROFILE → GAMING CLIPS page
   Full-screen profile sub-page (rides the shared .shelfd-diary-page shell).
   Single-column clip feed: 16:9 poster stage + game title + caption.
   Every size is calc(N * var(--shelfd-px, 1px)) so it scales 375 → 440 wide.
   ========================================================================== */

.shelfd-gaming-clips-page,
.shelfd-gaming-clips-page * {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0em;
}

.shelfd-gaming-clips-page .shelfd-diary-page-spacer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.shelfd-clips-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(24 * var(--shelfd-px, 1px));
  height: calc(24 * var(--shelfd-px, 1px));
  padding: 0 calc(8 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 232, 244, 0.62);
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 500;
}

.shelfd-gaming-clips-scroll {
  gap: calc(26 * var(--shelfd-px, 1px));
  /* v14.538: no visible scrollbar on this page — it sat right on top of the
     clip cards. Scrolling itself is untouched. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* v14.543: VERTICAL ONLY for the PAGE — the tag-filter row's negative side
     margin had made it wider than this container, handing the whole page a
     horizontal scroll.
     v14.564: `touch-action: pan-y` here was the wrong tool and became a real bug.
     touch-action intersects DOWN the ancestor chain, so `pan-y` on this scroller
     combined with `pan-x` on a rail left the intersection EMPTY — a finger landing
     inside a rail (i.e. on a video) could pan neither axis, which is why touching
     a preview blocked scrolling. overflow-x:hidden already prevents the sideways
     page drag on its own, so this is now `manipulation`: both pan axes allowed,
     double-tap zoom still off. */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: manipulation;
}
.shelfd-gaming-clips-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ---- Tag filter row (sticky under the topbar) --------------------------- */
.shelfd-clip-tag-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(8 * var(--shelfd-px, 1px));
  /* v14.543: no negative side margin — it made this row wider than the page's
     scroller and handed the whole page a horizontal scroll. */
  margin: 0;
  padding: calc(2 * var(--shelfd-px, 1px)) 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* v14.564: `manipulation`, not `pan-x` — the browser picks the axis from the
     gesture, so a sideways swipe scrolls this row and a vertical one still
     scrolls the page. See the note on .shelfd-gaming-clips-scroll. */
  touch-action: manipulation;
}
.shelfd-clip-tag-filters::-webkit-scrollbar { width: 0; height: 0; display: none; }
.shelfd-clip-tag-filter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  height: calc(32 * var(--shelfd-px, 1px));
  margin: 0;
  padding: 0 calc(13 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(235, 232, 244, 0.72);
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.shelfd-clip-tag-filter:active { transform: scale(0.96); }
.shelfd-clip-tag-filter span {
  color: rgba(235, 232, 244, 0.42);
  font-size: calc(11.5 * var(--shelfd-px, 1px));
  font-weight: 500;
}
.shelfd-clip-tag-filter.is-active {
  border-color: rgba(167, 139, 250, 0.48);
  background: rgba(139, 92, 246, 0.20);
  color: #ffffff;
}
.shelfd-clip-tag-filter.is-active span { color: rgba(232, 227, 243, 0.72); }

/* One section per game */
.shelfd-clips-game {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--shelfd-px, 1px));
  min-width: 0;
}
.shelfd-clips-game-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--shelfd-px, 1px));
  width: 100%;
  margin: 0;
  padding: 0 calc(2 * var(--shelfd-px, 1px));
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease;
}
.shelfd-clips-game-head:active { opacity: 0.6; }
.shelfd-clips-game-cover {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v14.549: 30x40 -> 50x60. */
  width: calc(50 * var(--shelfd-px, 1px));
  height: calc(60 * var(--shelfd-px, 1px));
  border-radius: calc(8 * var(--shelfd-px, 1px));
  background-color: #1b1b21;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: rgba(235, 232, 244, 0.5);
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 600;
}
.shelfd-clips-game-name {
  flex: 1 1 auto;
  min-width: 0;
  color: #f5f5f7;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shelfd-clips-game-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(22 * var(--shelfd-px, 1px));
  height: calc(22 * var(--shelfd-px, 1px));
  padding: 0 calc(7 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  /* v14.561: full-strength white — the count is the signal that there is more
     behind this row, so it shouldn't read as disabled. */
  color: #ffffff;
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 500;
}
/* v14.561: was the `›` text glyph at 20px, which renders wide and thin. An SVG
   polyline gives an exact, properly-proportioned chevron, in the lavender accent
   this app uses everywhere to mean "opens its own page". */
.shelfd-clips-game-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(16 * var(--shelfd-px, 1px));
  height: calc(16 * var(--shelfd-px, 1px));
  color: #a78bfa;
}
.shelfd-clips-game-chevron svg {
  width: calc(16 * var(--shelfd-px, 1px));
  height: calc(16 * var(--shelfd-px, 1px));
  display: block;
}

.shelfd-gaming-clips-list {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--shelfd-px, 1px));
  min-width: 0;
}

.shelfd-clip-card {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--shelfd-px, 1px));
  min-width: 0;
}

/* Poster stage — becomes the player on tap */
.shelfd-clip-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: calc(14 * var(--shelfd-px, 1px));
  background: #000;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* v14.564: NO press-down state and NO transition. The preview has to behave
     like a still part of the page: dragging a finger across it is a scroll, not
     a button press, and the old `:active { scale + opacity }` made every scroll
     that happened to start on a video look like a mis-tap. Play is triggered by
     the play badge or by the scroll observer, so the frame itself never needs to
     signal "pressable".
     Both axes stay pannable here too, so the gesture is never captured. */
  touch-action: manipulation;
}

.shelfd-clip-thumb {
  position: absolute;
  inset: 0;
  display: block;
  background-color: #131318;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Real captured frame layers over the game cover; if it 404s the <img> removes
   itself and the cover shows through. */
.shelfd-clip-thumb-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shelfd-clip-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--shelfd-px, 1px));
  height: calc(52 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  background: rgba(18, 16, 26, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 calc(4 * var(--shelfd-px, 1px)) calc(18 * var(--shelfd-px, 1px)) rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  color: #fff;
  pointer-events: none;
}
.shelfd-clip-play svg {
  width: calc(22 * var(--shelfd-px, 1px));
  height: calc(22 * var(--shelfd-px, 1px));
  margin-left: calc(2 * var(--shelfd-px, 1px));
}
.shelfd-clip-stage.is-playing .shelfd-clip-play { display: none; }

.shelfd-clip-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Caption */
.shelfd-clip-caption {
  margin: 0;
  padding: 0 calc(2 * var(--shelfd-px, 1px));
  /* v14.540: full-opacity white, 14.1px, no tracking. */
  color: #ffffff;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.shelfd-clip-mention { color: #b9a5ff; font-weight: 500; }
.shelfd-clip-mention.shelfd-mention-link { cursor: pointer; }

/* ---- The clip's own tags (tap = filter by that tag) --------------------- */
.shelfd-clip-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  padding: 0 calc(2 * var(--shelfd-px, 1px));
}
.shelfd-clip-tag {
  display: inline-flex;
  align-items: center;
  height: calc(24 * var(--shelfd-px, 1px));
  margin: 0;
  padding: 0 calc(10 * var(--shelfd-px, 1px));
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.11);
  color: #c9b8ff;
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.shelfd-clip-tag:active { transform: scale(0.95); }
.shelfd-clip-tag.is-active {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(139, 92, 246, 0.26);
  color: #ffffff;
}

/* Empty + cap note */
.shelfd-clips-empty {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--shelfd-px, 1px));
  padding: calc(34 * var(--shelfd-px, 1px)) calc(4 * var(--shelfd-px, 1px));
  text-align: center;
}
.shelfd-clips-empty-title {
  color: #f5f5f7;
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
}
.shelfd-clips-empty-copy {
  color: rgba(235, 232, 244, 0.46);
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 400;
}
.shelfd-clips-note {
  color: rgba(235, 232, 244, 0.40);
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 400;
  text-align: center;
}

/* ============================================================================
   v14.538 — GAMING CLIPS entry row on the GAMES shelf.
   Moved off the profile's shelf nav and re-homed inside #mylist-stage, directly
   under the Competitive / Live Games / Single Player / Party Games sub-toggles.
   Same card language as the profile nav buttons it replaces (rectangular card +
   lavender chevron), sized to the sub-filter card so the two rows line up.
   ========================================================================== */
.games-clips-shelf-entry {
  width: 100%;
  margin: 0 0 calc(16 * var(--shelfd-px, 1px));
  display: flex;
  justify-content: center;
}
.games-clips-shelf-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
  width: min(100%, calc(420 * var(--shelfd-px, 1px)));
  margin: 0;
  padding: calc(13 * var(--shelfd-px, 1px)) calc(15 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(12 * var(--shelfd-px, 1px));
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, opacity 160ms ease;
}
.games-clips-shelf-btn:active { opacity: 0.6; background: rgba(255, 255, 255, 0.09); }
@media (hover: hover) { .games-clips-shelf-btn:hover { color: #ffffff; } }
.games-clips-shelf-btn-label {
  min-width: 0;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.games-clips-shelf-btn-chevron {
  flex: 0 0 auto;
  color: #a78bfa;
  font-size: calc(22 * var(--shelfd-px, 1px));
  line-height: 1;
}
body.light-mode .games-clips-shelf-btn {
  color: #2a2248;
  background: rgba(20, 16, 40, 0.04);
  border-color: rgba(124, 58, 237, 0.18);
}

/* ============================================================================
   v14.540 — TOPBAR + CLIP ACTIONS on the clips pages
   ========================================================================== */

/* Centered title. The shared shell centers with `flex:1 + text-align:center`
   against a fixed 70px spacer, but the back button and the count+plus cluster
   are both wider than that, so the title drifted left. Absolute centering makes
   it independent of whatever sits on either side (same pattern the Favorites
   page uses). */
.shelfd-gaming-clips-page .shelfd-diary-page-topbar { position: relative; }
.shelfd-gaming-clips-page .shelfd-diary-page-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(10px + env(safe-area-inset-top, 0px));
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: calc(17 * var(--shelfd-px, 1px)) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #f5f5f7;
}
/* Back = bare left chevron, no capsule/circle behind it. */
.shelfd-gaming-clips-page .shelfd-diary-page-back {
  position: relative;
  z-index: 2;
  border: 0 !important;
  padding: calc(4 * var(--shelfd-px, 1px)) !important;
  background: transparent !important;
  color: #f5f5f7;
}
.shelfd-gaming-clips-page .shelfd-diary-page-back-icon {
  width: calc(22 * var(--shelfd-px, 1px));
  height: calc(22 * var(--shelfd-px, 1px));
}
/* Right cluster: clip count + upload (+). Above the centered title's layer.
   `margin-left: auto` is what pins it to the right edge — absolutely positioning
   the title above pulled it OUT of the flex row, so the row is now just [back]
   [spacer] and there is nothing left to push the spacer over. */
.shelfd-gaming-clips-page .shelfd-diary-page-spacer {
  position: relative;
  z-index: 2;
  width: auto;
  margin-left: auto;
  gap: calc(8 * var(--shelfd-px, 1px));
}
.shelfd-clips-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(30 * var(--shelfd-px, 1px));
  height: calc(30 * var(--shelfd-px, 1px));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f5f5f7;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, transform 120ms ease;
}
.shelfd-clips-add:active { opacity: 0.6; transform: scale(0.92); }
.shelfd-clips-add svg {
  width: calc(21 * var(--shelfd-px, 1px));
  height: calc(21 * var(--shelfd-px, 1px));
  display: block;
}

/* ---- Caption row + the three-dot button -------------------------------- */
.shelfd-clip-foot {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--shelfd-px, 1px));
  min-width: 0;
}
.shelfd-clip-foot .shelfd-clip-caption { flex: 1 1 auto; min-width: 0; }
/* No caption? The dots still need to sit hard right. */
.shelfd-clip-foot > .shelfd-clip-more:only-child { margin-left: auto; }
.shelfd-clip-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(28 * var(--shelfd-px, 1px));
  height: calc(28 * var(--shelfd-px, 1px));
  margin: calc(-3 * var(--shelfd-px, 1px)) 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(235, 232, 244, 0.62);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, transform 120ms ease;
}
.shelfd-clip-more:active { color: #ffffff; transform: scale(0.9); }
.shelfd-clip-more svg {
  width: calc(19 * var(--shelfd-px, 1px));
  height: calc(19 * var(--shelfd-px, 1px));
  display: block;
}

/* ---- Edit-clip sheet ---------------------------------------------------- */
.shelfd-clip-editor {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shelfd-clip-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 14, 0.55);
  opacity: 0;
  transition: opacity 220ms ease;
}
.shelfd-clip-editor.is-open .shelfd-clip-editor-backdrop { opacity: 1; }
.shelfd-clip-editor-panel {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - max(12px, var(--shelfd-safe-top, 0px)));
  padding: calc(8 * var(--shelfd-px, 1px)) calc(20 * var(--shelfd-px, 1px)) calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(196, 181, 253, 0.14);
  border-radius: calc(22 * var(--shelfd-px, 1px)) calc(22 * var(--shelfd-px, 1px)) 0 0;
  background: #101014;
  transform: translate3d(0, 104%, 0);
  transition: transform 270ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shelfd-clip-editor-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.shelfd-clip-editor.is-open .shelfd-clip-editor-panel { transform: translate3d(0, 0, 0); }
.shelfd-clip-editor-grabber {
  width: calc(38 * var(--shelfd-px, 1px));
  height: calc(4 * var(--shelfd-px, 1px));
  margin: calc(4 * var(--shelfd-px, 1px)) auto calc(12 * var(--shelfd-px, 1px));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.shelfd-clip-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
  margin-bottom: calc(14 * var(--shelfd-px, 1px));
}
.shelfd-clip-editor-title {
  margin: 0;
  color: #ffffff;
  font-size: calc(19 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
}
.shelfd-clip-editor-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--shelfd-px, 1px));
  height: calc(32 * var(--shelfd-px, 1px));
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(235, 232, 244, 0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-editor-close svg {
  width: calc(19 * var(--shelfd-px, 1px));
  height: calc(19 * var(--shelfd-px, 1px));
}
.shelfd-clip-editor-body { display: block; }
.shelfd-clip-editor-label {
  display: block;
  margin: calc(14 * var(--shelfd-px, 1px)) 0 calc(6 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.52);
  font-size: calc(11 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shelfd-clip-editor-body > .shelfd-clip-editor-label:first-child { margin-top: 0; }
/* 16px minimum so iOS never auto-zooms the sheet on focus. */
.shelfd-clip-editor-input {
  width: 100%;
  height: calc(44 * var(--shelfd-px, 1px));
  padding: 0 calc(13 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(12 * var(--shelfd-px, 1px));
  background: #0d0d0f;
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.shelfd-clip-editor-input:focus { border-color: rgba(167, 139, 250, 0.55); }
.shelfd-clip-editor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--shelfd-px, 1px));
  margin-bottom: calc(7 * var(--shelfd-px, 1px));
}
.shelfd-clip-editor-tags:empty { display: none; }
.shelfd-clip-editor-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
  height: calc(26 * var(--shelfd-px, 1px));
  padding: 0 calc(9 * var(--shelfd-px, 1px));
  border: 1px solid rgba(196, 181, 253, 0.34);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.20);
  color: #e6e0ff;
  font-size: calc(12 * var(--shelfd-px, 1px));
  white-space: nowrap;
}
.shelfd-clip-editor-tag button {
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: calc(14 * var(--shelfd-px, 1px));
  line-height: 1;
  cursor: pointer;
}
.shelfd-clip-editor-tag-presets {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--shelfd-px, 1px));
  margin-top: calc(7 * var(--shelfd-px, 1px));
}
.shelfd-clip-editor-tag-presets:empty { display: none; }
.shelfd-clip-editor-tag-preset {
  height: calc(26 * var(--shelfd-px, 1px));
  padding: 0 calc(10 * var(--shelfd-px, 1px));
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: transparent;
  color: rgba(235, 232, 244, 0.6);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12 * var(--shelfd-px, 1px));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-editor-tag-preset:active { color: #ffffff; border-color: rgba(196, 181, 253, 0.45); }
.shelfd-clip-editor-upload {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--shelfd-px, 1px));
  margin-top: calc(9 * var(--shelfd-px, 1px));
  padding: calc(9 * var(--shelfd-px, 1px)) calc(13 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f7;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-editor-upload:disabled { opacity: 0.5; cursor: default; }
.shelfd-clip-editor-status {
  min-height: calc(18 * var(--shelfd-px, 1px));
  margin-top: calc(10 * var(--shelfd-px, 1px));
  color: rgba(196, 181, 253, 0.88);
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  line-height: 1.35;
}
.shelfd-clip-editor-status.is-error { color: #fca5a5; }
.shelfd-clip-editor-status.is-ok { color: #86efac; }
.shelfd-clip-editor-save {
  display: block;
  width: 100%;
  min-height: calc(50 * var(--shelfd-px, 1px));
  margin-top: calc(6 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: calc(14 * var(--shelfd-px, 1px));
  background: #c4b5fd;
  color: #0b0b10;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.shelfd-clip-editor-save:active { transform: scale(0.985); }
.shelfd-clip-editor-save:disabled { opacity: 0.5; cursor: default; }

/* ============================================================================
   v14.544 — CLIP CARD FOOTER, three rows under the preview:
     1. like + comment, then the three-dot menu hard right
     2. the caption
     3. the upload date
   Like and comment act on the clip's feed post, so the counts match the
   Activity card exactly.
   ========================================================================== */
.shelfd-clip-actions {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--shelfd-px, 1px));
  padding: 0 calc(2 * var(--shelfd-px, 1px));
}
.shelfd-clip-action {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(235, 232, 244, 0.78);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, transform 120ms ease;
}
.shelfd-clip-action:active { transform: scale(0.92); }
.shelfd-clip-action svg {
  width: calc(21 * var(--shelfd-px, 1px));
  height: calc(21 * var(--shelfd-px, 1px));
  display: block;
}
.shelfd-clip-action.is-liked { color: #f472b6; }
.shelfd-clip-action-count {
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1;
}
.shelfd-clip-action-count:empty { display: none; }
/* The menu sits on the same row, pushed to the far right. */
.shelfd-clip-actions .shelfd-clip-more { margin: 0 0 0 auto; }

.shelfd-clip-date {
  padding: 0 calc(2 * var(--shelfd-px, 1px));
  color: rgba(235, 232, 244, 0.42);
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1;
}

/* ============================================================================
   v14.545 — the clip count now rides INSIDE the centred title, so "Gaming Clips"
   and its badge centre together as one unit instead of the badge floating off in
   the right-hand slot.
   ========================================================================== */
.shelfd-gaming-clips-page .shelfd-diary-page-title {
  gap: calc(8 * var(--shelfd-px, 1px));
}
.shelfd-gaming-clips-page .shelfd-diary-page-title .shelfd-clips-count {
  /* The title is pointer-events:none for centring; the badge is decorative too. */
  flex: 0 0 auto;
  font-weight: 500;
}

/* ============================================================================
   v14.546 — "Upload a clip" bar. Sits between the topbar and the scroller as a
   sibling of both, so it stays pinned while the clips scroll under it.
   ========================================================================== */
.shelfd-clips-upload-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--shelfd-px, 1px));
  width: 100%;
  min-height: calc(40 * var(--shelfd-px, 1px));
  margin: 0;
  padding: calc(10 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px));
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  color: #c9b8ff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, color 160ms ease;
}
.shelfd-clips-upload-bar:active {
  background: rgba(139, 92, 246, 0.16);
  color: #ffffff;
}
.shelfd-clips-upload-bar svg {
  flex: 0 0 auto;
  width: calc(16 * var(--shelfd-px, 1px));
  height: calc(16 * var(--shelfd-px, 1px));
  display: block;
}
body.light-mode .shelfd-clips-upload-bar {
  color: #6d28d9;
  background: rgba(20, 16, 40, 0.04);
  border-bottom-color: rgba(124, 58, 237, 0.16);
}

/* ============================================================================
   v14.547 — FILTER button (topbar right) + its sheet.
   Three axes in one sheet: game, tag, upload date.
   ========================================================================== */
.shelfd-clips-filter-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
  height: calc(30 * var(--shelfd-px, 1px));
  margin: 0;
  padding: 0 calc(2 * var(--shelfd-px, 1px));
  border: 0;
  background: transparent;
  color: #f5f5f7;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, transform 120ms ease, color 160ms ease;
}
.shelfd-clips-filter-btn:active { opacity: 0.6; transform: scale(0.92); }
.shelfd-clips-filter-btn svg {
  width: calc(21 * var(--shelfd-px, 1px));
  height: calc(21 * var(--shelfd-px, 1px));
  display: block;
}
.shelfd-clips-filter-btn.has-active-filter { color: #c4b5fd; }
.shelfd-clips-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(16 * var(--shelfd-px, 1px));
  height: calc(16 * var(--shelfd-px, 1px));
  padding: 0 calc(4 * var(--shelfd-px, 1px));
  border-radius: 999px;
  background: #c4b5fd;
  color: #0b0b10;
  font-size: calc(10.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  line-height: 1;
}

/* ---- Sheet -------------------------------------------------------------- */
.shelfd-clip-filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483644;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shelfd-clip-filter-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 14, 0.55);
  opacity: 0;
  transition: opacity 220ms ease;
}
.shelfd-clip-filter-sheet.is-open .shelfd-clip-filter-backdrop { opacity: 1; }
.shelfd-clip-filter-panel {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - max(12px, var(--shelfd-safe-top, 0px)));
  padding: calc(8 * var(--shelfd-px, 1px)) calc(20 * var(--shelfd-px, 1px)) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(196, 181, 253, 0.14);
  border-radius: calc(22 * var(--shelfd-px, 1px)) calc(22 * var(--shelfd-px, 1px)) 0 0;
  background: #101014;
  transform: translate3d(0, 104%, 0);
  transition: transform 270ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shelfd-clip-filter-sheet.is-open .shelfd-clip-filter-panel { transform: translate3d(0, 0, 0); }
.shelfd-clip-filter-grabber {
  flex: 0 0 auto;
  width: calc(38 * var(--shelfd-px, 1px));
  height: calc(4 * var(--shelfd-px, 1px));
  margin: calc(4 * var(--shelfd-px, 1px)) auto calc(12 * var(--shelfd-px, 1px));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.shelfd-clip-filter-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
  margin-bottom: calc(10 * var(--shelfd-px, 1px));
}
.shelfd-clip-filter-title {
  margin: 0;
  color: #ffffff;
  font-size: calc(19 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0em;
}
.shelfd-clip-filter-clear {
  border: 0;
  padding: calc(6 * var(--shelfd-px, 1px)) 0;
  background: transparent;
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-filter-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
}
.shelfd-clip-filter-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.shelfd-clip-filter-group { margin-bottom: calc(16 * var(--shelfd-px, 1px)); }
.shelfd-clip-filter-label {
  margin-bottom: calc(8 * var(--shelfd-px, 1px));
  color: #ffffff;
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0em;
  text-transform: uppercase;
}
.shelfd-clip-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(7 * var(--shelfd-px, 1px));
}
.shelfd-clip-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  min-height: calc(34 * var(--shelfd-px, 1px));
  max-width: 100%;
  padding: 0 calc(13 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(235, 232, 244, 0.78);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0em;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.shelfd-clip-filter-chip:active { transform: scale(0.96); }
.shelfd-clip-filter-chip span {
  color: rgba(235, 232, 244, 0.42);
  font-size: calc(11.5 * var(--shelfd-px, 1px));
}
.shelfd-clip-filter-chip.is-active {
  border-color: rgba(167, 139, 250, 0.48);
  background: rgba(139, 92, 246, 0.20);
  color: #ffffff;
}
.shelfd-clip-filter-chip.is-active span { color: rgba(232, 227, 243, 0.72); }
.shelfd-clip-filter-empty {
  color: rgba(235, 232, 244, 0.46);
  font-size: calc(13 * var(--shelfd-px, 1px));
  line-height: 1.4;
}
.shelfd-clip-filter-done {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  min-height: calc(50 * var(--shelfd-px, 1px));
  margin-top: calc(4 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: calc(14 * var(--shelfd-px, 1px));
  background: #c4b5fd;
  color: #0b0b10;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.shelfd-clip-filter-done:active { transform: scale(0.985); }

/* ============================================================================
   v14.557 — MAIN gaming-clips page: each game is a horizontal rail.
   Ten FIFA clips is one swipeable row, not ten stacked cards. The single-game
   page keeps .shelfd-gaming-clips-list (vertical) — that page IS the deep dive.
   ========================================================================== */
.shelfd-gaming-clips-rail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: calc(12 * var(--shelfd-px, 1px));
  min-width: 0;
  /* Bleed to the page edges so a card can sit flush left while the next peeks. */
  margin: 0 calc(-16 * var(--shelfd-px, 1px));
  padding: 0 calc(16 * var(--shelfd-px, 1px));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc(16 * var(--shelfd-px, 1px));
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* v14.564: `manipulation` — both axes offered, and the browser resolves which
     one from the gesture's direction. `pan-x` here used to intersect with the
     scroller's `pan-y` to nothing, so a finger starting on a video in this rail
     could not scroll the page at all. */
  touch-action: manipulation;
}
.shelfd-gaming-clips-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* v14.559: the card runs from the content margin out to the PAGE edge — the 88%
   width was the real limiter (the old max-width never bound), so the video was
   losing ~60px of width for no reason. `100% + 12px` reaches past the rail's own
   right padding to the true edge while still starting flush with the game header
   above it, and a sliver of the next card still peeks so the row reads as
   swipeable. Height follows for free: .shelfd-clip-stage is aspect-ratio 16/9,
   so a wider card is a proportionally taller video, same ratio exactly. */
.shelfd-gaming-clips-rail > .shelfd-clip-card {
  flex: 0 0 auto;
  width: calc(100% + (12 * var(--shelfd-px, 1px)));
  max-width: none;
  scroll-snap-align: start;
}
/* Captions must not stretch a rail card taller than its neighbours. */
.shelfd-gaming-clips-rail > .shelfd-clip-card .shelfd-clip-caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* v14.560: transparent tap catcher over an auto-playing Streamable iframe. The
   iframe would otherwise swallow the tap, so the HUD could never be summoned. */
.shelfd-clip-tap-shield {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  background: transparent;
}

/* ============================================================================
   v14.562 — SINGLE-GAME page: the video runs near-full-bleed, 6px a side.
   Only the STAGE bleeds — the action row, caption, date and tags stay on the
   page's normal 14px gutter, so just the video gets the extra width.
   The offset is viewport-relative rather than a hard-coded un-padding, so it
   stays exactly 6px whatever the scroller's padding is; and because the stage
   is aspect-ratio 16/9, the height grows with it at the same ratio.
   ========================================================================== */
.shelfd-game-clips-page .shelfd-gaming-clips-list > .shelfd-clip-card > .shelfd-clip-stage {
  width: calc(100vw - (12 * var(--shelfd-px, 1px)));
  max-width: none;
  /* 50% of the card + 6px, pulled back by half the viewport = a 6px left edge. */
  margin-left: calc(50% - 50vw + (6 * var(--shelfd-px, 1px)));
}

/* ============================================================================
   v14.563 — the clip's tags now live IN the action row, right of the comment
   button, instead of on their own line under the date. Lilac accent fill so the
   pill reads as the interactive filter it is; the label itself is white at 75%.
   ========================================================================== */
.shelfd-clip-actions .shelfd-clip-tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
.shelfd-clip-actions .shelfd-clip-tag {
  flex: 0 0 auto;
  height: calc(24 * var(--shelfd-px, 1px));
  padding: 0 calc(10 * var(--shelfd-px, 1px));
  border: 1px solid rgba(167, 139, 250, 0.42);
  background: rgba(167, 139, 250, 0.18);
  color: rgba(255, 255, 255, 0.75);
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0em;
  max-width: calc(120 * var(--shelfd-px, 1px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shelfd-clip-actions .shelfd-clip-tag.is-active {
  border-color: rgba(167, 139, 250, 0.75);
  background: rgba(167, 139, 250, 0.32);
  color: #ffffff;
}

/* ============================================================================
   v14.565 — NO FLICKER. The player is layered over the poster (which now stays
   mounted for the card's whole life) and cross-fades in once it has a decodable
   frame. Nothing ever exposes the stage's black fill.
   ========================================================================== */
.shelfd-clip-media {
  opacity: 0;
  transition: opacity 200ms ease;
}
.shelfd-clip-media.is-live { opacity: 1; }
/* The poster sits below the player and simply stops being visible once the
   player is opaque — no removal, no reflow, nothing to repaint. */
.shelfd-clip-stage .shelfd-clip-thumb {
  z-index: 0;
}
.shelfd-clip-media { z-index: 1; }
.shelfd-clip-tap-shield { z-index: 2; }
/* Reduced motion: swap instantly rather than fading, but still never via black. */
@media (prefers-reduced-motion: reduce) {
  .shelfd-clip-media { transition: none; }
}

/* ============================================================================
   v14.566 — CLIP OPTIONS (⋯) bottom sheet. Rises from the bottom to 36% of the
   viewport, 400ms, transform-only so it composites at 120fps — matching the
   post-detail and upload sheets rather than the anchored feed popover this used
   to reuse.
   ========================================================================== */
.shelfd-clip-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.shelfd-clip-action-sheet.open { pointer-events: auto; }
.shelfd-clip-action-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  /* v14.567: 0.55 -> 0.80 so the page behind reads as clearly dimmed and the
     sheet is unambiguously the focused layer. */
  background: rgba(8, 7, 14, 0.80);
  opacity: 0;
  transition: opacity 280ms ease;
}
.shelfd-clip-action-sheet.open .shelfd-clip-action-sheet-backdrop { opacity: 1; }
.shelfd-clip-action-sheet-panel {
  position: relative;
  width: 100%;
  height: 36dvh;
  max-height: 36dvh;
  padding: calc(8 * var(--shelfd-px, 1px)) calc(20 * var(--shelfd-px, 1px)) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: calc(22 * var(--shelfd-px, 1px)) calc(22 * var(--shelfd-px, 1px)) 0 0;
  background: #16161a;
  box-shadow: 0 calc(-14 * var(--shelfd-px, 1px)) calc(40 * var(--shelfd-px, 1px)) rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 100%, 0);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.shelfd-clip-action-sheet.open .shelfd-clip-action-sheet-panel {
  transform: translate3d(0, 0, 0);
}
.shelfd-clip-action-sheet-grabber {
  flex: 0 0 auto;
  width: calc(38 * var(--shelfd-px, 1px));
  height: calc(4 * var(--shelfd-px, 1px));
  margin: calc(4 * var(--shelfd-px, 1px)) auto calc(14 * var(--shelfd-px, 1px));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.shelfd-clip-action-sheet-option {
  flex: 0 0 auto;
  width: 100%;
  min-height: calc(52 * var(--shelfd-px, 1px));
  margin: 0 0 calc(8 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(14 * var(--shelfd-px, 1px));
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease;
}
.shelfd-clip-action-sheet-option:active { background: rgba(255, 255, 255, 0.09); }
.shelfd-clip-action-sheet-cancel {
  flex: 0 0 auto;
  width: 100%;
  min-height: calc(48 * var(--shelfd-px, 1px));
  margin-top: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-action-sheet-cancel:active { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .shelfd-clip-action-sheet-panel,
  .shelfd-clip-action-sheet-backdrop { transition: none !important; }
}