/* social-wall (client tokens only; the dialog is real screen size, in the top layer) */
.wall{ position:absolute; inset:0; overflow:clip; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.wall.dragging{ cursor:grabbing; }
.wall-world{ position:absolute; inset:0; }
.wall-post{ position:absolute; left:0; top:0; will-change:translate; border-radius:8px; overflow:hidden; padding:0; box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
@media (hover:hover){ .wall:not(.dragging) .wall-post:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); } }
.wall-post .ad{ pointer-events:none; }

.wall-dialog{ border:0; padding:0; background:transparent; overflow:visible; max-width:none; max-height:none; }
.wall-dialog::backdrop{ background:rgba(10,12,16,.6); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
/* the close-up: as tall as the screen allows (84vh), several times the wall tile */
.wall-big{ height:min(84vh, 86vw * 1.25); aspect-ratio:4 / 5; border-radius:18px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform-origin:0 0; will-change:transform; }
.wall-big.is-square{ aspect-ratio:1; height:min(80vh, 86vw); }
.wall-close{ position:absolute; top:-16px; right:-16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.9); color:#1d1d1f;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.wall-close svg{ width:14px; height:14px; }