/* Álbum de polaroids (fotos). A polaroid também é usada na tela final. */

.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(20,13,8,.88); backdrop-filter: blur(3px); overflow-y: auto; padding: 24px 16px; }
.album { max-width: 980px; margin: 0 auto; }
.album-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 26px; color: var(--amber); }
.album-head button { font-family: 'VT323', monospace; font-size: 22px; background: none; border: 1px solid var(--amber); color: var(--amber); padding: 2px 10px; cursor: pointer; }
.polaroids { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 22px; padding-bottom: 40px; }

/* ---------- polaroid ---------- */
.polaroid { background: var(--cream); padding: 12px 12px 6px; box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: rotate(var(--r, 0deg)); transition: transform .25s; }
.polaroid:hover { transform: rotate(0) scale(1.04); }
.polaroid img, .ph-empty { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.polaroid img { filter: sepia(.35) contrast(1.05) saturate(.85); }
.polaroid figcaption { font-family: 'Caveat', cursive; font-size: 22px; color: var(--brown); text-align: center; padding: 6px 0 2px; }

/* placeholder listrado quando não tem imagem (modo demo) */
.ph-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
  background: repeating-linear-gradient(135deg, var(--mustard) 0 18px, var(--brown2) 18px 36px, var(--green2) 36px 54px, var(--blue2) 54px 72px);
  color: var(--cream); font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px #000; padding: 10px;
}
.ph-empty small { font-weight: 400; font-size: 11px; opacity: .9; }