/* x-pile.css · the pile, played with.
   every print can be picked up and dropped, a real loupe hangs over the desk,
   two typed scraps deal one out and flip them all, and a small scrap keeps a tally
   of how many times you touched the mess. paper only: no keylines, no glow. */

/* ── a print in the hand ─────────────────────────────── */
.pilearea .print img, .pilearea .slip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pilearea .print.held, .pilearea .slip.held { transition: none; z-index: 900 !important; cursor: grabbing; }
.pilearea .print.held { filter: drop-shadow(0 22px 20px rgba(30, 15, 0, .36)); transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(1.05); }
.pilearea .print.held.flipped { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) rotateY(180deg) scale(1.05); }
.pilearea .slip.held { filter: drop-shadow(0 14px 14px rgba(30, 15, 0, .34)); }
.pilearea .slip { transition: transform .32s; }
/* the thumb is on it (phone long-press) */
.pilearea .print.pressed { z-index: 900 !important; filter: drop-shadow(0 16px 16px rgba(30, 15, 0, .36)); transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(1.04); }
.pilearea .print.dealt .paper { padding-bottom: 46px; }
.pilearea .print.dealt .label { font-size: 17px; }

/* ── the loupe ───────────────────────────────────────── */
.loupe-glass { position: absolute; left: 0; top: 0; width: 230px; height: 230px; pointer-events: none; z-index: 950; opacity: 0; transform: scale(.86) rotate(-6deg); transform-origin: 85px 85px; transition: opacity .14s ease-out, transform .18s ease-out; filter: drop-shadow(0 14px 14px rgba(30, 15, 0, .38)); }
.loupe-glass.on { opacity: 1; transform: none; }
.loupe-glass .lens { position: absolute; left: 0; top: 0; width: 170px; height: 170px; border-radius: 50%; overflow: hidden; background: var(--sheet); }
.loupe-glass .lens-img { position: absolute; inset: 0; background-repeat: no-repeat; background-color: var(--sheet); image-rendering: pixelated; }
.loupe-glass .lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 22px rgba(30, 15, 0, .28); pointer-events: none; }
.loupe-glass .loupe-rim { position: absolute; left: 0; top: 0; width: 230px; height: 230px; overflow: visible; }
.loupe-glass .loupetag { position: absolute; left: -14px; top: 176px; background: var(--sheet); font-size: 13px; line-height: 1.25; padding: 3px 9px; white-space: nowrap; transform: rotate(-3.5deg); }
.pilearea.louping .print { cursor: none; }
@media (hover: none) { .loupe-glass { display: none; } }

/* ── typed scraps in the actions row ─────────────────── */
.pileactions { align-items: center; }
.pileactions .tw.act { --rot: -1.5deg; }
.pileactions .tw.act.flip { --rot: 1.2deg; }
.pileactions .tw.act > .scrap { padding: 9px 18px; font-weight: 700; font-size: 17px; line-height: 24px; white-space: nowrap; }
.pileactions .tw.act:active { --s: .96; }
.pileactions .tw.act:focus-visible { outline: 0; }
.pileactions .tw.act:focus-visible > .scrap { outline: 3px solid var(--loud); outline-offset: 3px; }
.pileactions .pilelog { --rot: 1.8deg; margin-left: auto; }
.pileactions .pilelog > .scrap { font-size: 14px; line-height: 1.3; padding: 7px 12px 5px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.pileactions .pilelog svg { display: block; height: 24px; overflow: visible; }

/* ── the note in the corner + its red arrow ──────────── */
.pilearea .pilenote { position: absolute; right: 2%; top: -30px; z-index: 33; --rot: 3deg; --w: 214px; pointer-events: none; }
.pilearea .pilenote > .scrap { width: var(--w); padding: 10px 14px 8px; line-height: 1.15; }
.pilearea .pilenote .hand-live { font-size: 22px; color: var(--ink); display: block; }
.pilearea .pilemarks { z-index: 32; }

/* ── paper bits that jump when something lands ───────── */
.pilebit { position: absolute; width: 8px; height: 8px; pointer-events: none; z-index: 940; }

@media (max-width: 720px) {
  .pileactions { gap: 14px 18px; }
  .pileactions .tw.act > .scrap { padding: 7px 14px; font-size: 15px; }
  .pileactions .pilelog { margin-left: 0; width: 100%; --rot: -1deg; }
  .pileactions .pilelog > .scrap { display: inline-flex; }
  .pilearea .print.dealt .label { font-size: 14px; }
  .pilearea .pilenote { right: 6px; top: -8px; --w: 176px; }
  .pilearea .pilenote .hand-live { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pilearea .slip { transition: none; }
  .loupe-glass { transition: none; }
}