/* ==========================================================
   Album : polaroïds scotchés au washi tape, déplaçables
   ========================================================== */
.polaroid {
  position: relative; margin: 0; background: var(--pol-bg); color: var(--pol-ink);
  padding: 10px 10px 0; border-radius: 3px;
  box-shadow: 0 18px 36px -18px rgba(90, 40, 10, .6), 0 2px 4px rgba(90, 40, 10, .15);
}
.polaroid::before { /* washi tape */
  content: ""; position: absolute; left: 50%; top: -12px; width: 74px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(246, 178, 58, .75) 0 6px, rgba(255, 220, 160, .75) 6px 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.polaroid.tape-rose::before { background: repeating-linear-gradient(45deg, rgba(228, 108, 128, .7) 0 6px, rgba(255, 200, 205, .75) 6px 12px); }
.polaroid.tape-jade::before { background: repeating-linear-gradient(45deg, rgba(31, 122, 108, .55) 0 6px, rgba(180, 225, 210, .7) 6px 12px); }
.polaroid .ph { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: #eadccb; }
.polaroid.wide .ph { aspect-ratio: 4 / 3; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.polaroid figcaption { font-family: var(--f-hand); font-size: 1.5rem; line-height: 1; padding: 10px 2px 12px; text-align: center; }

.board {
  position: relative; height: 700px; border-radius: 28px;
  background: radial-gradient(80% 70% at 50% 40%, var(--card), var(--hanji-2));
  border: 1px solid var(--line);
}
.board .polaroid {
  position: absolute; width: 200px; cursor: grab; touch-action: none; user-select: none;
  left: calc(16px + var(--x) * (100% - 232px)); top: calc(24px + var(--y) * (100% - 344px));
  transform: rotate(var(--r));
  transition: transform .25s, box-shadow .25s, left .7s cubic-bezier(.2, .8, .2, 1), top .7s cubic-bezier(.2, .8, .2, 1);
}
.board .polaroid.wide { width: 260px; left: calc(16px + var(--x) * (100% - 292px)); }
.board .polaroid:hover { transform: rotate(0deg) scale(1.04); }
.board .polaroid.dragging { cursor: grabbing; transition: none; transform: rotate(0deg) scale(1.08); box-shadow: 0 30px 60px -20px rgba(90, 40, 10, .7); }
.board-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.board-tools .hint { color: var(--ink-soft); font-size: .9rem; }

@media (max-width: 760px) {
  .board { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; padding: 28px 14px; }
  .board .polaroid, .board .polaroid.wide { position: relative; width: auto; left: auto; top: auto; cursor: zoom-in; touch-action: auto; }
  .board .polaroid.wide { grid-column: 1 / -1; }
  .board .polaroid figcaption { font-size: 1.2rem; }
}