/* Play deck: every desk photo cast to a Play item opens the same fanned stack. Only transform + opacity animate. */
.pd-edge {
  position: absolute; left: 6%; top: 5%; width: 88%; height: 90%; pointer-events: none; border-radius: 3px;
  background: linear-gradient(160deg, #efece4, #dcd7cb); border: 1px solid rgba(60, 52, 40, .08); opacity: .6;
  box-shadow: 0 1px 3px rgba(var(--shadow-c), .1), 0 5px 10px -4px rgba(70, 50, 120, .1);
  transform: translate(var(--ex), var(--ey)) rotate(calc(var(--er) + var(--ea)));
}
html.dark .pd-edge { background: linear-gradient(160deg, #3a3b44, #2a2b33); border-color: rgba(236, 231, 220, .1); }
.obj.pd-src { transition: opacity .25s ease; }
body.pd-open .obj.pd-lifted { opacity: 0; pointer-events: none; }

#pd { --ch: min(66vh, 640px); --dw: min(74vw, calc(var(--ch) * .8)); position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
#pd[hidden] { display: none; }
.pd-dim { position: absolute; inset: 0; background: var(--dimbg); opacity: 0; transition: opacity .45s var(--out); backdrop-filter: blur(3px); }
#pd.on .pd-dim { opacity: 1; }
.pd-deck { position: relative; width: var(--dw); height: var(--ch); margin-bottom: 36px; }
.pd-card {
  position: absolute; inset: 0; margin: 0; padding: 12px 12px 40px; background: var(--ps-bg); border-radius: 4px;
  border: 1px solid var(--ps-rule); cursor: pointer; will-change: transform, opacity;
  box-shadow: 0 2px 4px rgba(var(--shadow-c), .2), 0 18px 34px -10px rgba(var(--shadow-c), .38), 0 30px 60px -20px rgba(80, 50, 150, .28);
  transition: transform .55s var(--spring), opacity .4s ease;
}
.pd-card.drag { transition: none; cursor: grabbing; }
.pd-card .pd-im { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ps-elev); border-radius: 2px; }
.pd-card img, .pd-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.pd-card .pd-tag { position: absolute; left: 14px; right: 14px; bottom: 11px; font: 400 10px/1 var(--ps-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ps-ts); display: flex; justify-content: space-between; }
.pd-bar { position: absolute; left: 0; right: 0; bottom: max(26px, 5vh); display: flex; justify-content: center; align-items: center; gap: 14px; pointer-events: none; }
.pd-bar > * { pointer-events: auto; }
#pd-count { font: 400 10px/1 var(--ps-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; }
.pd-b {
  appearance: none; border: 1px solid var(--ps-rule); cursor: pointer; color: var(--ps-tp); background: var(--ps-bg);
  width: 44px; height: 44px; padding: 0; border-radius: 999px; display: grid; place-items: center;
  transition: transform .3s var(--spring), border-color .2s linear, background-color .2s linear;
}
.pd-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-b:hover { transform: translateY(-1px); border-color: var(--ps-accent); background: var(--ps-elev); }
.pd-b:active { transform: scale(.94); transition-duration: .1s; }
.pd-b:focus-visible { outline: 1.5px solid var(--ps-accent); outline-offset: 2px; }
/* prev / next sit left and right of the picture, vertically centred on it (the deck is offset up by half its bottom margin) */
.pd-side { position: absolute; z-index: 3; top: calc(50% - 18px - 22px); }
.pd-side.pd-prev { left: calc(50% - var(--dw) / 2 - 62px); }
.pd-side.pd-next { right: calc(50% - var(--dw) / 2 - 62px); }
.pd-x { position: absolute; top: max(18px, 3vh); right: max(18px, 3vw); width: 44px; height: 44px; }
.pd-x svg { width: 18px; height: 18px; }
.pd-hint { position: absolute; top: max(24px, 3.4vh); left: 0; right: 0; margin: 0; text-align: center; font: 400 10px/1 var(--ps-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .7; pointer-events: none; }
html.m .pd-hint { display: none; }
html.m #pd { --ch: min(60vh, 520px); --dw: min(68vw, calc(var(--ch) * .8)); }
html.m .pd-deck { margin-bottom: 70px; }
html.m .pd-side { top: calc(50% - 35px - 22px); }
html.m .pd-side.pd-prev { left: calc(50% - var(--dw) / 2 - 52px); }
html.m .pd-side.pd-next { right: calc(50% - var(--dw) / 2 - 52px); }
@media (prefers-reduced-motion: reduce) {
  .pd-card, .pd-dim, .obj.pd-src, .pd-b { transition: opacity .2s linear !important; }
}