/* ============================================================================
   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)); }

/* 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;
  width: calc(30 * var(--shelfd-px, 1px));
  height: calc(40 * var(--shelfd-px, 1px));
  border-radius: calc(6 * 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);
  color: rgba(235, 232, 244, 0.58);
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 500;
}
.shelfd-clips-game-chevron {
  flex: 0 0 auto;
  color: rgba(235, 232, 244, 0.45);
  font-size: calc(20 * var(--shelfd-px, 1px));
  line-height: 1;
}

.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;
  transition: transform 270ms cubic-bezier(0.22, 1, 0.36, 1), opacity 270ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-clip-stage:not(.is-playing):active { transform: scale(0.985); opacity: 0.82; }

.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));
  color: rgba(235, 232, 244, 0.62);
  font-size: calc(14 * var(--shelfd-px, 1px));
  font-weight: 400;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.shelfd-clip-mention { color: #b9a5ff; font-weight: 500; }
.shelfd-clip-mention.shelfd-mention-link { cursor: pointer; }

/* 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;
}