/* Archives — Sticker view (client's choice, 21-Oct). See js/archive-sticker-v3.js. */

.desk .arc-grid.view-sticker { position: relative; height: 100%; min-height: 70svh; }

/* the sticker: the button is only moved (transform, its own layer); the lean, the lift and
   the shadow sit on the inner layer, so a drag never repaints the shadow */
.stk { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none;
  transform: translate3d(var(--x, 0), var(--y, 0), 0); transition: transform .7s var(--ease); will-change: transform;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
.stk.is-dragging { cursor: grabbing; transition: none; }
.view-sticker:not(.is-dealt) .stk { visibility: hidden; }   /* until the first deal has placed them */
.view-sticker.is-first .stk { transition: none; }           /* …which lands in place; later deals glide */
.stk__in { display: block; position: relative; transform: rotate(var(--r, 0deg)); transition: transform .35s var(--ease), filter .35s;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.16)) drop-shadow(0 10px 18px rgba(0,0,0,.10)); }
.stk img { display: block; width: var(--sz, 160px); height: auto; max-width: none; user-select: none; pointer-events: none; }
.stk .stk__cover { border: 6px solid #fff; border-radius: 10px; }
.stk:hover .stk__in, .stk:focus-visible .stk__in, .stk.is-dragging .stk__in {
  transform: rotate(calc(var(--r, 0deg) * .4)) scale(1.05);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)) drop-shadow(0 22px 30px rgba(0,0,0,.14)); }
.stk:focus-visible { outline: none; }
.stk:focus-visible .stk__in { outline: 1px solid var(--ink); outline-offset: 6px; }

/* the numbered tag beside each sticker (the circled numbers in the reference); the number is
   drawn from data-n, so it isn't read as part of the sticker's name */
.stk__no { position: absolute; top: -6px; right: -26px; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center; font: 200 var(--fs-small)/1 var(--grotesk); color: var(--ink); background: var(--paper); transform: rotate(calc(var(--r, 0deg) * -1)); }
.stk__no::before { content: attr(data-n); }

/* the tooltip: small, plain, at the pointer (moved by transform) */
.stk-tip { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; white-space: nowrap; padding: .35rem .6rem; border-radius: 4px;
  background: var(--ink); color: var(--paper); font: 200 var(--fs-small)/1.2 var(--grotesk); letter-spacing: .02em; }
.stk-tip[hidden] { display: none; }

/* touch screens and small windows: one light shadow and no hover lift — the same pile,
   lighter to paint on a phone */
@media (hover: none), (max-width: 820px) {
  .stk__in, .stk:hover .stk__in { filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); transition: transform .25s var(--ease); }
  .stk:hover .stk__in { transform: rotate(var(--r, 0deg)); }
  .stk.is-dragging .stk__in { transform: rotate(calc(var(--r, 0deg) * .4)) scale(1.04); filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
  .stk__no { right: -20px; width: 18px; height: 18px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .stk, .stk__in { transition: none; } }