/* ---------- clip card (a phone-shaped UGC frame) ---------- */
.clip {
  /* Clips are phone screenshots, so they keep a phone screen's rounded corners (the only round
     corners in the UI). Each context sets --phone-r to suit its card size. */
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--phone-r, 18px); overflow: hidden; background: #222;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1); color: #fff; isolation: isolate;
}
.clip video, .clip img, .clip .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip .poster { background: var(--g); }
.clip .poster::before { /* soft "person" silhouette so posters read as reaction footage */
  content: ""; position: absolute; left: 50%; top: 30%; width: 62%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.28), rgba(255,255,255,.04) 70%);
  }
.clip .poster::after {
  content: ""; position: absolute; left: 50%; bottom: -8%; width: 120%; height: 46%; transform: translateX(-50%);
  border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.18), transparent 70%);
}
.clip .cap {
  position: absolute; left: 8%; right: 8%; top: 14%; z-index: 2; padding: 7px 9px; border-radius: 3px;
  background: #000; color: #fff; text-align: center; font-weight: 600; font-size: clamp(10px, 1vw, 13px); line-height: 1.25; letter-spacing: -.01em;
}
.clip .cap.outline { background: none; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000, 0 1px 0 #000; font-size: clamp(11px, 1.1vw, 14px); }
.clip .cap.snap { background: rgba(0,0,0,.55); border-radius: 0; left: 0; right: 0; }
.clip .meta { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; }
.clip .meta .who { display: flex; align-items: center; gap: 6px; opacity: .92; }
.clip .meta .av { width: 18px; height: 18px; border-radius: 50%; background: var(--av, #fff); border: 1.5px solid #fff; }
.clip .views {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--pill);
  background: rgba(0,0,0,.55); font-family: var(--mono); font-size: 11px;
}
.clip .views svg { width: 11px; height: 11px; }
.clip .rail { position: absolute; right: 8px; bottom: 44px; z-index: 2; display: grid; gap: 10px; justify-items: center; font-size: 9px; font-weight: 600; }
.clip .rail i { display: block; width: 24px; height: 24px; border-radius: 3px; background: rgba(255,255,255,.18); }
.clip .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.2); z-index: 3; }
.clip .prog::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: prog var(--len, 6s) linear infinite; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.clip .plat { position: absolute; top: 10px; right: 10px; z-index: 3; width: 22px; height: 22px; opacity: .9; }

.clip.real .rail, .clip.real .plat { display: none; }
.clip.real .meta .who { padding: 3px 7px; border-radius: 3px; background: rgba(0,0,0,.5); }
.clip .clip { --phone-r: 0px; } /* tiles inside a clip (the Mix preview) */