/* ══════════════════════════════════════
   PIN SCREEN
══════════════════════════════════════ */
#pin-screen {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 40px;
}

#pin-screen.hidden {
  animation: fadeOut .4s forwards;
  pointer-events: none;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

.pin-title {
  font-size: .72rem; font-weight: 300;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--muted);
}

.pin-dots {
  display: flex; gap: 20px;
}

.pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  transition: background .2s, border-color .2s;
}

.pin-dot.filled {
  background: #fff;
  border-color: #fff;
}

.pin-dot.error {
  background: #e74c3c;
  border-color: #e74c3c;
  animation: shake .4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(4, 64px);
  gap: 12px;
}

.pin-key {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}

.pin-key:hover  { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); }
.pin-key:active { background: rgba(255,255,255,.18); }

.pin-key.pin-zero { grid-column: 2; }
.pin-key.pin-del  { grid-column: 3; font-size: .9rem; color: var(--muted); }

.pin-hint {
  font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.2);
  margin-top: -20px;
}

/* ══════════════════════════════════════
   GALLERY PAGE
══════════════════════════════════════ */
#gallery-page { display: none; }
#gallery-page.visible { display: block; }

/* Tabs */
.tabs {
  display: flex; justify-content: center;
  padding: 0 24px 40px;
}

.tab-btn {
  font-family: var(--font);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: none;
  padding: 10px 28px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s, border-color .2s;
}

.tab-btn.active {
  color: #fff;
  border-bottom-color: #fff;
}

.tab-btn:hover { color: rgba(255,255,255,.8); }

/* Masonry grid */
.gallery {
  padding: 0 16px 80px;
  columns: 4 220px;
  column-gap: 8px;
}

.gallery__item {
  break-inside: avoid;
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(255,255,255,.04);
}

.gallery__item.hidden { display: none; }

.gallery__item img,
.gallery__item video {
  display: block; width: 100%;
  filter: brightness(.9);
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .5s;
}

.gallery__item:hover img,
.gallery__item:hover video {
  transform: scale(1.03);
  filter: brightness(1);
}

/* play-icon badge for videos */
.video-badge {
  position: absolute; bottom: 10px; left: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

.video-badge::after {
  content: '';
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid rgba(255,255,255,.9);
  margin-left: 2px;
}

/* ══════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════ */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.96); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  flex-direction: column;
}

.lightbox.open { display: flex; }

.lightbox__media {
  max-width: 92vw; max-height: 84vh;
  object-fit: contain; border-radius: 2px;
  animation: lbIn .3s ease;
}

.lightbox__video {
  max-width: 92vw; max-height: 84vh;
  border-radius: 2px; outline: none;
  animation: lbIn .3s ease;
}

.lightbox__close {
  position: absolute; top: 20px; right: 28px;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; color: var(--muted); line-height: 1;
  transition: color .2s;
}
.lightbox__close:hover { color: #fff; }

.lightbox__prev,
.lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 2.2rem; color: var(--muted); padding: 16px;
  transition: color .2s; user-select: none;
}
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
.lightbox__prev:hover,
.lightbox__next:hover { color: #fff; }

.lightbox__counter {
  margin-top: 16px;
  font-size: .6rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--muted);
}

@keyframes lbIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
.reveal.visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 767px) {
  .gallery { columns: 2 140px; column-gap: 6px; padding: 0 8px 60px; }
  .gallery__item { margin-bottom: 6px; }
  .tabs { padding: 0 12px 28px; }
  .tab-btn { padding: 10px 18px; }
  .lightbox__prev { left: 2px; }
  .lightbox__next { right: 2px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .gallery { columns: 3 180px; }
}