/* pixelwrld-droppable — STRUCTURE (box sizes + placeholder art). Requires pixelwrld-tile.css. */
.sp-pw-droppable .sp-pw-tile__visuals { width: 295px; height: 320.83px; }
.sp-pw-droppable .pw-drop__left { width: 220px; height: 320.83px; }
.sp-pw-droppable .pw-drop__left > .sp-pw-shot { width: 220px; height: 320.83px; }
.sp-pw-droppable .pw-drop__right { width: 240px; height: 364.8px; z-index: 1; }
.sp-pw-droppable .pw-drop__file1 { width: 38px; height: 49px; z-index: 3; }
.sp-pw-droppable .pw-drop__file2 { width: 48px; height: 65px; z-index: 3; }
.sp-pw-droppable .sp-pw-tile__title { height: 36px; font-size: 36px; }
.sp-pw-droppable .pw-drop__right .sp-pw-shot__face, .sp-pw-droppable .pw-drop__left .sp-pw-shot__face {
  border: 0; background: var(--sp-pw-drop-window, linear-gradient(180deg, #3a3a3c 0%, #232325 60%, #1a1a1c 100%));
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.pw-win { position: absolute; inset: 18px 18px auto; display: grid; gap: 10px; }
.pw-win::before { content: ""; width: 42px; height: 10px; background: radial-gradient(circle 4px at 5px 5px, #5b5b5e 98%, transparent) 0 0 / 15px 10px repeat-x; }
.pw-win i { display: block; height: 30px; border-radius: 10px; background: rgba(255,255,255,.07); }
.pw-win i:nth-child(2n) { background: rgba(255,255,255,.12); }
.pw-win b { display: flex; align-items: center; gap: 8px; height: 30px; color: #fff; font: 700 italic 17px/1 var(--sp-pw-font, Inter, sans-serif); }
.pw-win b::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #3ddc5f; color: #0b3d16; font: 700 18px/1 sans-serif; }
.pw-file { position: absolute; inset: 0; }
.pw-file::before { content: ""; position: absolute; inset: 0 0 8px; border-radius: 4px 12px 4px 4px; background: linear-gradient(180deg, #fff, #eef0ef); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.pw-file::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 11px; border-radius: 3px; background: #3ddc5f; }
/* the source screenshots carry transparent margins: the windows sit inset inside their boxes */
.sp-pw-droppable .pw-drop__left .sp-pw-shot__face { inset: 20px 34px 0 26px; border-radius: 22px; }
.sp-pw-droppable .pw-drop__right .sp-pw-shot__face { inset: 26px 40px 0 44px; border-radius: 22px; }

/* Real source screenshot: the image carries its own frame and fade. */
.sp-pw-droppable .sp-pw-shot .sp-pw-shot__face.sp-pw-shot__face--bare { inset: 0; border: 0; background: none; border-radius: 0; }