body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #111;
      color: #fff;
      overflow-x: hidden;
    }

    .header {
      padding:
        24px 20px 18px;
      border-bottom:
        1px solid rgba(0,255,100,0.25);
      margin-bottom: 20px;
    }

    .header h1 {
      margin: 0;
      font-family:
        "Courier New",
        monospace;
      font-size:
        clamp(1.2rem, 3vw, 2rem);
      font-weight: normal;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: left;
      color: #00ff66;
      text-shadow:
        0 0 4px rgba(0,255,100,0.35);
    }

    .gallery {
      display: block;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .row {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }

    .gallery img {
      display: block;
      width: auto;
      height: 100%;
      object-fit: contain;
      cursor: pointer;
      border-radius: 8px;
      background: #000;
      transition: transform 0.2s ease;
    }

    .gallery img:hover {
      transform: scale(1.02);
    }

    /* LIGHTBOX */

    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);

      display: flex;
      align-items: center;
      justify-content: center;

      opacity: 0;
      pointer-events: none;

      transition: opacity 0.3s ease;
      z-index: 1000;
    }

    .lightbox.active {
      opacity: 1;
      pointer-events: all;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
    }

    .close,
    .prev,
    .next {
      position: absolute;
      color: white;
      cursor: pointer;
      user-select: none;
      z-index: 1001;
    }

    .close {
      top: 20px;
      right: 30px;
      font-size: 40px;
    }

/* -------------------------
   LIGHTBOX NAV BUTTONS
------------------------- */

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 42px;
  cursor: pointer;
  user-select: none;
  z-index: 1001;
  border-radius: 12px;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.65;
}

.prev {
  left: 12px;
}

.next {
  right: 12px;
}

/* HOVER */

.prev:hover,
.next:hover {
  background:
    rgba(255,255,255,0.06);
  opacity: 1;

}

    /* MOBILE */

    @media (max-width: 600px) {

      .gallery {
        padding: 10px;
        box-sizing: border-box;
      }

      .row {
        display: block;
        margin-bottom: 0;
      }

      .gallery img {
        display: block;
        width: calc(100vw - 20px);
        max-width: 100%;
        height: auto !important;
        margin-bottom: 10px;
        box-sizing: border-box;
      }

       /* DISABLE HOVER SCALE ON MOBILE */

      .gallery img:hover {
        transform: none;
      }

    }