/* Post-party gallery. Phone-first: browse, tap to save to camera roll, or pick
   a bunch and download. Locked against horizontal movement by theme.css. */

.gal-body { min-height: 100dvh; background:
  radial-gradient(100% 40% at 50% 0%, color-mix(in srgb, var(--purple) 26%, transparent), transparent 55%),
  var(--bg); padding-bottom: 90px; }

.gal-head {
  max-width: 1100px; margin: 0 auto; padding: 24px 18px 8px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.gal-kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.gal-title { margin: 6px 0 0; font-size: clamp(26px, 6vw, 40px); font-weight: 800; letter-spacing: -0.01em; }
.gal-count { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.gal-actions { display: flex; gap: 10px; }

.gal-btn {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
}
.gal-btn.primary { border: 0; color: #241705; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 72%, var(--pink))); }
.gal-btn:active { transform: translateY(1px); }

.gal-hint { max-width: 1100px; margin: 6px auto 14px; padding: 0 18px; color: var(--muted); font-size: 13.5px; }

.grid {
  max-width: 1100px; margin: 0 auto; padding: 0 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }

.tile {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(9,4,14,0.8)); opacity: 0; transition: opacity .2s; }
.tile:hover .cap { opacity: 1; }
/* selection mode */
.tile .check { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(9,4,14,0.4); display: none; align-items: center; justify-content: center; color: #241705; font-weight: 800; }
body.selecting .tile .check { display: flex; }
.tile.sel { outline: 3px solid var(--gold); outline-offset: -3px; }
.tile.sel .check { background: var(--gold); border-color: var(--gold); }
.tile.sel .check::after { content: "\2713"; }

.gal-empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* Selection bar */
.selbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; border-radius: 16px;
  background: rgba(20,10,26,0.92); border: 1px solid var(--line); backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); max-width: calc(100% - 24px);
}
.sel-count { font-weight: 700; font-size: 14px; }
.sel-actions { display: flex; gap: 8px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 30; background: rgba(6,2,10,0.94);
  display: flex; align-items: center; justify-content: center; }
.lb-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 94vw; }
.lb-stage img { max-width: 94vw; max-height: 74vh; object-fit: contain; border-radius: 10px; background: #000; }
.lb-meta { color: #e7d9f2; font-size: 15px; text-align: center; min-height: 1em; max-width: 90vw; }
.lb-meta b { color: var(--gold); }
.lb-save { border: 0; border-radius: 14px; padding: 14px 26px; font-size: 16px; font-weight: 800; color: #241705; cursor: pointer;
  background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--pink))); box-shadow: 0 8px 22px color-mix(in srgb, var(--pink) 35%, transparent); }
.lb-save:active { transform: translateY(1px); }
.lb-tip { color: var(--muted); font-size: 12px; text-align: center; margin: 0; max-width: 80vw; }
.lb-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(20,10,26,0.7); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 1px solid var(--line);
  background: rgba(20,10,26,0.6); color: #fff; font-size: 34px; cursor: pointer; border-radius: 12px; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
@media (max-width: 560px) { .lb-nav { width: 40px; height: 54px; font-size: 26px; } }

.gal-foot { text-align: center; padding: 30px 0 40px; }
.gal-foot a { color: var(--gold); text-decoration: none; font-weight: 600; font-size: 14px; }