* { box-sizing: border-box; }

:root{
  --bg:#111;
  --panel:#1b1b1b;
  --text:#fff;
  --muted:#bdbdbd;
  --gap:12px;
  --radius:12px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 12px;
}

h1{
  margin: 10px 0 18px;
  text-align:center;
  font-size: clamp(1.2rem, 4vw, 2rem);
}

/* Masonry-ish layout that preserves aspect ratio (no cropping) */
.gallery{
  column-gap: var(--gap);
  column-count: 1;
}

@media (min-width: 520px){ .gallery{ column-count: 2; } }
@media (min-width: 900px){ .gallery{ column-count: 3; } }
@media (min-width: 1200px){ .gallery{ column-count: 4; } }

.item{
  break-inside: avoid;
  margin: 0 0 var(--gap);
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.item button{
  all: unset;
  cursor: pointer;
  display:block;
  width:100%;
}

.item img{
  display:block;
  width:100%;
  height:auto;           /* keeps original aspect ratio */
  background:#222;
}

.caption{
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--muted);
  display:flex;
  justify-content: space-between;
  gap: 10px;
}

.caption .name{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Fullscreen Viewer ---------- */
.viewer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  z-index: 9999;
}
.viewer.open{ display:block; }

.viewer-top{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0));

  z-index: 10001; /* ✅ ensures close button is clickable */
}

.viewer-close{
  all: unset;
  cursor: pointer;
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
}

.viewer-stage{
  position: absolute;
  inset: 0;
  padding-top: 52px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;

  z-index: 10000; /* ✅ below viewer-top */
}

.viewer-stage img{
  display:block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  padding: 12px;
}