```html
<!-- =========================================================
     NOSTALGIC BEDROOM — COLLECTIONS ROOM / GEL V1
     14 unlocked collections + 20 locked archives
========================================================= -->

<style>
  .nb-collections-room {
    width: 100%;
    padding: 90px 5vw;
    background:
      radial-gradient(circle at top, rgba(87, 112, 255, 0.22), transparent 35%),
      linear-gradient(180deg, #090b18 0%, #101225 45%, #070812 100%);
    color: #f4f4ff;
    font-family: "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nb-collections-header {
    max-width: 1180px;
    margin: 0 auto 55px auto;
    text-align: center;
  }

  .nb-collections-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 14px;
    border: 1px solid rgba(145, 180, 255, 0.35);
    border-radius: 999px;
    color: #b8c9ff;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(40, 55, 120, 0.25);
    box-shadow: 0 0 18px rgba(80, 115, 255, 0.18);
  }

  .nb-collections-title {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 28px rgba(115, 145, 255, 0.35);
  }

  .nb-collections-intro {
    max-width: 820px;
    margin: 26px auto 0 auto;
    color: #c9cceb;
    font-size: 1.05rem;
    line-height: 1.7;
  }

  .nb-collections-quote {
    margin-top: 28px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .nb-grid {
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 26px;
  }

  .nb-card {
    position: relative;
    min-height: 520px;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(13, 16, 34, 0.82);
    border: 1px solid rgba(150, 175, 255, 0.18);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .nb-card:hover {
    transform: translateY(-6px);
    border-color: rgba(170, 200, 255, 0.48);
    box-shadow:
      0 26px 70px rgba(0, 0, 0, 0.6),
      0 0 35px rgba(105, 140, 255, 0.18);
  }

  .nb-card-media {
    position: relative;
    height: 235px;
    overflow: hidden;
    background: #070814;
  }

  .nb-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.08) contrast(1.05);
    transform: scale(1.01);
  }

  .nb-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 30%, rgba(8, 9, 20, 0.9) 100%),
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 2px,
        transparent 4px
      );
    pointer-events: none;
  }

  .nb-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(10, 13, 29, 0.72);
    border: 1px solid rgba(180, 205, 255, 0.25);
    backdrop-filter: blur(8px);
    color: #dce5ff;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .nb-card-body {
    padding: 24px 24px 26px 24px;
  }

  .nb-card-title {
    margin: 0 0 10px 0;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  .nb-card-text {
    min-height: 88px;
    margin: 0 0 18px 0;
    color: #c7c9df;
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .nb-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
  }

  .nb-chip {
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(105, 125, 210, 0.14);
    border: 1px solid rgba(145, 165, 255, 0.18);
    color: #d7dcff;
    font-size: 0.76rem;
  }

  .nb-preview-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 18px;
  }

  .nb-preview-strip img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(165, 185, 255, 0.16);
    opacity: 0.92;
  }

  .nb-trailer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(95, 125, 255, 0.42), rgba(155, 70, 210, 0.34));
    border: 1px solid rgba(190, 210, 255, 0.28);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 0 22px rgba(105, 130, 255, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .nb-trailer-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(115, 150, 255, 0.58), rgba(180, 80, 230, 0.48));
  }

  .nb-locked-divider {
    max-width: 1480px;
    margin: 70px auto 28px auto;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #aeb8e8;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.82rem;
  }

  .nb-locked-divider::before,
  .nb-locked-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 180, 255, 0.38), transparent);
  }

  .nb-locked-card {
    min-height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    border-radius: 24px;
    background:
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.025) 0px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 2px,
        transparent 5px
      ),
      radial-gradient(circle at top, rgba(95, 115, 210, 0.18), transparent 55%),
      rgba(8, 10, 22, 0.92);
    border: 1px solid rgba(120, 140, 210, 0.18);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.45);
    opacity: 0.84;
  }

  .nb-locked-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(90, 110, 190, 0.16);
    border: 1px solid rgba(160, 185, 255, 0.24);
    color: #d7dcff;
    font-size: 1.3rem;
  }

  .nb-locked-title {
    margin: 0 0 8px 0;
    color: #e7ebff;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nb-locked-text {
    margin: 0;
    color: #9da5d0;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  @media (max-width: 720px) {
    .nb-collections-room {
      padding: 65px 18px;
    }

    .nb-card {
      min-height: auto;
    }

    .nb-card-media {
      height: 210px;
    }
  }
</style>

<section class="nb-collections-room" id="collections-room">
  <div class="nb-collections-header">
    <span class="nb-collections-kicker">Collections Room · V1 Frozen Archive</span>

    <h2 class="nb-collections-title">Collections Room</h2>

    <p class="nb-collections-intro">
      Only a first part of the archive is currently visible. This page presents the first frozen snapshot
      of the Nostalgic Bedroom Collections Room. Each unlocked collection includes multiple screenshots,
      showing different views, moods or layouts from the archive.
    </p>

    <p class="nb-collections-quote">
      Some doors are already open. Others are still waiting in the dark.
    </p>
  </div>

  <div class="nb-grid">

    <!-- Resident Evil -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/resident-evil-01.webp" alt="Resident Evil Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Resident Evil</h3>
        <p class="nb-card-text">
          A survival horror archive filled with CRT nightmares, police station memories, cult covers and PlayStation-era tension.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Survival Horror</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/resident-evil-01.webp" alt="">
          <img src="assets/collections/resident-evil-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- BioShock -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/bioshock-01.webp" alt="BioShock Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">BioShock</h3>
        <p class="nb-card-text">
          A cinematic dive into Rapture, between art deco posters, underwater atmosphere, forgotten machines and objects from another world.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">3 Screenshots</span>
          <span class="nb-chip">Art Deco</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/bioshock-01.webp" alt="">
          <img src="assets/collections/bioshock-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Metroid -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/metroid-01.webp" alt="Metroid Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Metroid</h3>
        <p class="nb-card-text">
          A dark science-fiction archive built around Samus, hostile planets, alien technology and museum-like interface layouts.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Sci-Fi</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/metroid-01.webp" alt="">
          <img src="assets/collections/metroid-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Mega Man -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/mega-man-01.webp" alt="Mega Man Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Mega Man</h3>
        <p class="nb-card-text">
          A futuristic and electric collection mixing stage select energy, technical panels, cult covers and tribute rooms.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Stage Select</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/mega-man-01.webp" alt="">
          <img src="assets/collections/mega-man-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Metal Slug -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/metal-slug-01.webp" alt="Metal Slug Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Metal Slug</h3>
        <p class="nb-card-text">
          An explosive arcade collection full of pixel art chaos, military cartoon energy, underwater scenes, vehicles and SNK madness.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Arcade SNK</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/metal-slug-01.webp" alt="">
          <img src="assets/collections/metal-slug-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Kingdom Hearts -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/kingdom-hearts-01.webp" alt="Kingdom Hearts Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Kingdom Hearts</h3>
        <p class="nb-card-text">
          A luminous and melancholic archive filled with keys, reflections, lost worlds and PlayStation 2 memories.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Fantasy PS2</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/kingdom-hearts-01.webp" alt="">
          <img src="assets/collections/kingdom-hearts-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Ghostbusters -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/ghostbusters-01.webp" alt="Ghostbusters Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Ghostbusters</h3>
        <p class="nb-card-text">
          A paranormal room full of machines, CRT screens, ghost traps and strange signals still coming from the other side.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Custom Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Paranormal Room</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/ghostbusters-01.webp" alt="">
          <img src="assets/collections/ghostbusters-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Mario -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/mario-01.webp" alt="Mario Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Mario</h3>
        <p class="nb-card-text">
          A colorful and joyful Nintendo archive built around pop energy, iconic worlds and family-friendly nostalgia.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Classic Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Nintendo</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/mario-01.webp" alt="">
          <img src="assets/collections/mario-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Donkey Kong -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/donkey-kong-01.webp" alt="Donkey Kong Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Donkey Kong</h3>
        <p class="nb-card-text">
          A warm tropical archive filled with CRT glow, jungle memories, bananas, branches and Nintendo adventure.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Classic Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Tropical Room</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/donkey-kong-01.webp" alt="">
          <img src="assets/collections/donkey-kong-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Castlevania -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/castlevania-01.webp" alt="Castlevania Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Castlevania</h3>
        <p class="nb-card-text">
          A gothic and theatrical archive built like a cursed gallery around castles, monsters, candles and vampire legends.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Gothic Archive</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/castlevania-01.webp" alt="">
          <img src="assets/collections/castlevania-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Streets of Rage -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/streets-of-rage-01.webp" alt="Streets of Rage Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Streets of Rage</h3>
        <p class="nb-card-text">
          An urban arcade collection full of neon lights, street fights, Sega energy and late-night beat ’em up nostalgia.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Beat ’em Up</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/streets-of-rage-01.webp" alt="">
          <img src="assets/collections/streets-of-rage-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Soul Calibur -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/soul-calibur-01.webp" alt="Soul Calibur Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Soul Calibur</h3>
        <p class="nb-card-text">
          A weapon-based fighting archive blending swords, legends, sea storms, arenas and Dreamcast-era memories.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Weapon Fighter</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/soul-calibur-01.webp" alt="">
          <img src="assets/collections/soul-calibur-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- F-Zero -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/f-zero-01.webp" alt="F-Zero Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">F-Zero</h3>
        <p class="nb-card-text">
          A high-speed futuristic racing archive full of neon trails, machines, pilots and Nintendo sci-fi intensity.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Futuristic Racing</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/f-zero-01.webp" alt="">
          <img src="assets/collections/f-zero-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

    <!-- Street Fighter -->
    <article class="nb-card">
      <div class="nb-card-media">
        <span class="nb-card-badge">Unlocked Archive</span>
        <img src="assets/collections/street-fighter-01.webp" alt="Street Fighter Collection preview">
      </div>
      <div class="nb-card-body">
        <h3 class="nb-card-title">Street Fighter</h3>
        <p class="nb-card-text">
          A fighting game archive built around arcade memories, iconic characters, Capcom energy and competitive nostalgia.
        </p>
        <div class="nb-card-meta">
          <span class="nb-chip">Advanced Collection</span>
          <span class="nb-chip">2+ Screenshots</span>
          <span class="nb-chip">Arcade Fighting</span>
        </div>
        <div class="nb-preview-strip">
          <img src="assets/collections/street-fighter-01.webp" alt="">
          <img src="assets/collections/street-fighter-02.webp" alt="">
        </div>
        <a class="nb-trailer-btn" href="#" target="_blank" rel="noopener">▶ Watch the Presentation Video</a>
      </div>
    </article>

  </div>

  <div class="nb-locked-divider">
    Locked Archives
  </div>

  <div class="nb-grid">

    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 015 — Locked</h3><p class="nb-locked-text">Collection data unavailable. Signal still encrypted.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 016 — Locked</h3><p class="nb-locked-text">Room not yet opened. Restoration in progress.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 017 — Locked</h3><p class="nb-locked-text">Visual archive pending. Please come back later.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 018 — Locked</h3><p class="nb-locked-text">Unknown collection detected.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 019 — Locked</h3><p class="nb-locked-text">Media files sealed.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 020 — Locked</h3><p class="nb-locked-text">Trailer signal missing.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 021 — Locked</h3><p class="nb-locked-text">Collection currently hidden.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 022 — Locked</h3><p class="nb-locked-text">Memory fragment unavailable.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 023 — Locked</h3><p class="nb-locked-text">This room is still under construction.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 024 — Locked</h3><p class="nb-locked-text">Access restricted.</p></article>

    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 025 — Locked</h3><p class="nb-locked-text">New archive will be revealed soon.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 026 — Locked</h3><p class="nb-locked-text">Data restoration in progress.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 027 — Locked</h3><p class="nb-locked-text">Unlisted collection.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 028 — Locked</h3><p class="nb-locked-text">Waiting for visual confirmation.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 029 — Locked</h3><p class="nb-locked-text">Hidden room detected.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 030 — Locked</h3><p class="nb-locked-text">Collection locked.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 031 — Locked</h3><p class="nb-locked-text">More memories coming soon.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 032 — Locked</h3><p class="nb-locked-text">This archive has not been opened yet.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 033 — Locked</h3><p class="nb-locked-text">Signal lost.</p></article>
    <article class="nb-locked-card"><div class="nb-locked-icon">🔒</div><h3 class="nb-locked-title">Archive 034 — Locked</h3><p class="nb-locked-text">Future collection slot.</p></article>

  </div>
</section>
```