datasprawl

�� 2

mybb@mybb.ru (root) — Tue, 03 Mar 2026 03:07:12 +0300

��

mybb@mybb.ru (root) — Tue, 23 Dec 2025 23:51:50 +0300

��:

<!--HTML-->
<div class="cp-box profile-db">
  <div class="db-corner-tl"></div>
  <div class="db-corner-br"></div>

  <div class="db-header">
    <div class="db-cover">
      <img src="https://i.imgur.com/AC3xLZa.png" alt="cover">
      <div class="db-scanline"></div>
      <div class="db-overlay-text">NCPD_DB_ACCESS_VER_2.77</div>
    </div>
    
    <div class="db-id-card">
      <div class="db-avatar-frame">
        <img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png" alt="avatar">
        <div class="db-status-light online"></div> 
      </div>
      <div class="db-names">
        <div class="db-name-glitch" data-text="JOHNNY SILVERHAND">JOHNNY SILVERHAND</div>
        <div class="db-alias">TARGET_ID: "SAMURAI"</div>
      </div>
    </div>

    <div class="db-player" onclick="toggleDbMusic(this)">
      <audio id="db_audio" loop>
        <source src="https://forumstatic.ru/files/001b/6b/7e/95545.mp3" type="audio/mpeg">
      </audio>
      <div class="db-play-btn">▶</div>
      <div class="db-track-marquee"><span>Samurai - Chippin' In</span></div>
    </div>
  </div>

  <div class="db-nav">
    <button class="db-tab-btn active" onclick="openDbTab(event, 'tab-dossier')">FILE</button>
    <button class="db-tab-btn" onclick="openDbTab(event, 'tab-stash')">STASH</button>
    <button class="db-tab-btn" onclick="openDbTab(event, 'tab-badges')">LOGS</button>
    <button class="db-tab-btn" onclick="openDbTab(event, 'tab-wardrobe')">VISUAL</button>
  </div>

  <div class="db-content">

    <div id="tab-dossier" class="db-pane active">
      <div class="db-grid-info">
        
        <div class="db-col-left">
          
          <div class="db-block highlight">
            <div class="db-sys-label">SUBJECT_CLASS</div>
            <span class="db-label">OCCUPATION</span>
            <div class="db-occupation">ROCKERBOY / MERC</div>
          </div>

          <div class="db-block" style="padding: 0; overflow: hidden;">
            <div class="db-sys-label">ICE_DAEMON_V2.1</div>
            
            <div class="net-console">
              <div class="net-header">
                <span style="color: var(--c-dim);">NET_STATUS:</span>
                <span style="color: var(--a-red);">INTRUSION_DETECTED</span>
              </div>
              <div class="net-scan-track"><div class="net-scan-bar"></div></div>
              <div class="net-log">
                <span>> BLOCKING_PORT_80... [OK]</span><br>
                <span>> ENCRYPTING_USER_DATA...</span><br>
                <span class="net-typing">> TRACING_SOURCE<span class="blink-cursor">_</span></span>
              </div>
            </div>
          </div>

          <div class="db-block">
            <div class="db-sys-label">INFORMANT_INTEL</div>
            <span class="db-label">UNVERIFIED REPORTS (�����)</span>
            <ul class="db-list">
              <li>������� �� ������� ����� �� �����.</li>
              <li>�������, ������ ����� "�������� ������", ������� �� ����� � ������-����.</li>
              <li>������, ��� �� ������������� ��� � �����.</li>
            </ul>
          </div>

          <div class="db-block" style="padding: 0; border: none; overflow: hidden;">
             <div class="db-ride-container">
               <img src="https://i.imgur.com/VuwSYlW.png" alt="visual">
               <div class="db-ride-overlay">
                 <span>VISUAL_KEY_01:</span>
                 <b>ARCH NAZARÉ</b>
               </div>
             </div>
          </div>

        </div>

        <div class="db-col-right">
          
          <div class="db-block">
            <div class="db-sys-label">NETWORK_GRAPH</div>
            <span class="db-label">KNOWN ASSOCIATES</span>
            <div class="db-network-grid">
              <div class="db-net-item" title="Judy (Friend)"><img src="https://i.imgur.com/FIwlYeu.png"><div class="db-net-status green"></div></div>
              <div class="db-net-item" title="Smasher (Enemy)"><img src="https://i.imgur.com/p039Zhx.png"><div class="db-net-status red"></div></div>
              <div class="db-net-item" title="Rogue"><img src="https://placehold.co/50x50/333/999?text=?"><div class="db-net-status yellow"></div></div>
              <div class="db-net-item empty">+</div>
            </div>
          </div>

          <div class="db-block" style="flex-grow: 1;">
            <div class="db-sys-label">PERSONAL_LOG_FILE</div>
            <span class="db-label">NOTES</span>
            <p class="db-text">
              "Wake the fuck up, Samurai."<br><br>
              �������� ����� � ������������� ����. ��� ������, ��������� � ������� ������������� �����, �� �� ������� � ������� ���������. ���� �� ������ ���� � "���������", ������, � �������� ��� �������. <br><br>
              ������� �������: ��������, ������� ����, ��� �������.
            </p>
            <div class="db-decor-footer">/// END_OF_RECORD</div>
          </div>

        </div>
      </div>
    </div>

<div id="tab-stash" class="db-pane">
      <div class="db-block" style="min-height: 300px;">
        <div class="db-sys-label">ASSET_MANIFEST_V4</div>
        
        <div class="db-stash-stats">
            <span style="color: var(--a-blue);">> SCANNING_STORAGE...</span>
            <div class="db-mini-bar"><div style="width: 65%;"></div></div>
            <span>65% LOAD</span>
        </div>

        <div class="db-split-layout">
            
            <div class="db-left-wrapper">
                
                <div class="db-separator">GEAR_AND_WEAPONS</div>
                
                <div class="db-stash-list">
                    
                    <div class="db-stash-item"
                         onclick="viewStash(this)"
                         data-title="MALORIAN ARMS 3516"
                         data-type="WEAPON (LEGENDARY)"
                         data-from="SELF_CRAFTED"
                         data-desc="������� �������� ������. ��������� �����, ������� �����."
                         data-img="https://i.imgur.com/zqwBywt.png">
                        <div class="db-item-tag tag-gold">WPN</div>
                        <img src="https://i.imgur.com/zqwBywt.png">
                    </div>

                    <div class="db-stash-item"
                         onclick="viewStash(this)"
                         data-title="SANDEVISTAN 'APOGEE'"
                         data-type="CYBERWARE"
                         data-from="SHOP PURCHASE"
                         data-desc="����������������� �������-�����������. ��������� ��������� ������� �����."
                         data-img="https://i.imgur.com/lSxLT6X.png">
                        <div class="db-item-tag tag-blue">CYB</div>
                        <img src="https://i.imgur.com/lSxLT6X.png">
                    </div>

                    <div class="db-stash-item"
                         onclick="viewStash(this)"
                         data-title="MAXDOC MK.1"
                         data-type="CONSUMABLE"
                         data-from="LOOT"
                         data-desc="����������� ���������. ���� ���� � ��������."
                         data-img="https://i.imgur.com/PTEXeJv.png">
                        <div class="db-item-tag tag-gray">MED</div>
                        <img src="https://i.imgur.com/PTEXeJv.png">
                    </div>

                </div>

                <div class="db-separator">GIFTS_RECEIVED</div>

                <div class="db-stash-list">
                    
                    <div class="db-stash-item"
                         onclick="viewStash(this)"
                         data-title="CHAMPARADISE"
                         data-type="GIFT / ALCOHOL"
                         data-from="JUDY ALVAREZ"
                         data-desc="������� ��������� �����������. ������� ������: '�� ���, V'."
                         data-img="https://upforme.ru/uploads/001c/98/42/2/314586.webp">
                        <div class="db-item-tag tag-blue">GIFT</div>
                        <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp">
                    </div>

                    <div class="db-stash-item used"
                         onclick="viewStash(this)"
                         data-title="PIZZA BOX (EMPTY)"
                         data-type="TRASH"
                         data-from="RIVER WARD"
                         data-desc="������� �� �����. ���� ������."
                         data-img="https://i.imgur.com/9xDG0nZ.png">
                        <div class="db-item-tag tag-gray">USED</div>
                        <img src="https://i.imgur.com/9xDG0nZ.png">
                    </div>

                </div>
            </div>

            <div class="db-viewer stash-viewer">
                <div class="db-sys-label">ITEM_INSPECTOR</div>
                <div class="db-viewer-empty">
                   <div class="db-scanline" style="opacity: 0.2;"></div>
                   SELECT ITEM...
                </div>
                
                <div class="db-viewer-content" style="display: none;">
                    <img id="s-img" src="">
                    
                    <div class="db-v-meta" style="margin-top: 10px;">
                        <span id="s-title" style="color: var(--a-yel); font-weight: bold; font-size: 11px;">TITLE</span>
                        <span id="s-type" style="font-size: 9px; color: var(--c-dim);">TYPE</span>
                    </div>

                    <div class="db-meta-row">
                        <span>SOURCE:</span>
                        <span id="s-from" style="color: var(--a-blue);">UNKNOWN</span>
                    </div>

                    <div id="s-desc" class="db-v-desc">Description text...</div>
                </div>
            </div>

        </div>
        <div class="db-decor-footer">/// END_OF_MANIFEST</div>
      </div>
    </div>

    <div id="tab-badges" class="db-pane">
      
      <div class="db-block" style="min-height: 300px;">
        <div class="db-sys-label">ACTIVITY_HISTORY_LOG</div>
      
        <div class="db-split-layout">
            
            <div class="db-left-wrapper">
                <div class="net-header" style="margin: 0; padding: 0 5px;">
                    <span style="color: var(--c-dim);">LOG_SOURCE:</span>
                    <span style="color: var(--a-yel);">PUBLIC_RECORDS</span>
                </div>
                
                <div class="db-item-list">
                  <div class="db-item" onclick="viewItem(this)" data-title="WELCOME TO NC" data-date="TIMESTAMP: 20.12.2077" data-desc="������������� �������� � ����-����." data-img="https://upforme.ru/uploads/001c/98/42/2/t89348.jpg"><img src="https://upforme.ru/uploads/001c/98/42/2/t89348.jpg"></div>
                  <div class="db-item" onclick="viewItem(this)" data-title="HALLOWEEN 25" data-date="TIMESTAMP: 31.10.2025" data-desc="������� � �������� �����������." data-img="https://upforme.ru/uploads/001c/98/42/2/t317316.jpg"><img src="https://upforme.ru/uploads/001c/98/42/2/t317316.jpg"></div>
                </div>
            </div>

            <div class="db-viewer">
              <div class="db-sys-label">DATA_DECRYPTOR</div>
              <div class="db-viewer-empty"><div class="db-scanline" style="opacity: 0.2;"></div>AWAITING_INPUT...</div>
              
              <div class="db-viewer-content" style="display: none;">
                <img id="v-img" src="">
                <div class="db-v-meta"><span id="v-title">TITLE</span><small id="v-date" style="color: var(--a-blue);">Date</small></div>
                
                <div class="db-integrity-row">
                    <div class="db-status-box"></div>
                    <span style="font-size: 9px; color: var(--c-dim); font-family: monospace;">DATA_INTEGRITY: VERIFIED</span>
                </div>
                
                <div id="v-desc" class="db-v-desc">Description</div>
              </div>
            </div>
        </div>
        <div class="db-decor-footer">/// END_OF_LOGS</div>
      </div>
    </div>

<div id="tab-wardrobe" class="db-pane">
      <div class="db-block">
          <div class="db-sys-label">UI_OVERLAY_CONFIG</div>
          
          <span class="db-label">VISUAL TAGS (������)</span>
          <div class="db-scroll-row">
            <img src="https://i.imgur.com/pgybpkH.png" class="db-plaque">
            <img src="https://i.imgur.com/24m6X4W.gif" class="db-plaque">
            <img src="https://i.imgur.com/h3hrbSu.gif" class="db-plaque">
          </div>
          
          <div style="margin-top: 15px;"></div>
          
          <span class="db-label">PROFILE ICONS</span>
          <div class="db-scroll-row">
            <img src="https://i.imgur.com/FIwlYeu.png" class="db-icon-thumb">
            <img src="https://i.imgur.com/p039Zhx.png" class="db-icon-thumb">
            <img src="https://i.imgur.com/9xDG0nZ.png" class="db-icon-thumb">
            <img src="https://i.imgur.com/PTEXeJv.png" class="db-icon-thumb">
          </div>

          <div style="margin-top: 15px;"></div>

          <span class="db-label">BACKGROUNDS (����)</span>
          <div class="db-scroll-row">
            <img src="https://i.imgur.com/MdRRym9.png" class="db-bg-thumb">
            <img src="https://i.imgur.com/p039Zhx.png" class="db-bg-thumb">
            <img src="https://i.imgur.com/go9qI4f.png" class="db-bg-thumb">
          </div>
          
          <div class="db-decor-footer">/// RENDERING_COMPLETED</div>
      </div>
    </div>
<script>
// 1. �����
function toggleDbMusic(btn) {
    const audio = btn.querySelector('audio');
    const label = btn.querySelector('.db-track-marquee span');
    
    if(audio.paused) {
        audio.play();
        btn.querySelector('.db-play-btn').innerText = '❚❚'; // ����� ������
        btn.style.borderColor = 'var(--a-yel)';
    } else {
        audio.pause();
        btn.querySelector('.db-play-btn').innerText = '▶';
        btn.style.borderColor = 'var(--a-bor-g)';
    }
}

// 2. ����
function openDbTab(evt, tabId) {
    const container = evt.currentTarget.closest('.profile-db');
    
    // ������ ���
    const panes = container.querySelectorAll('.db-pane');
    panes.forEach(p => p.classList.remove('active'));
    
    // �������������� ������
    const btns = container.querySelectorAll('.db-tab-btn');
    btns.forEach(b => b.classList.remove('active'));
    
    // �������� ������
    container.querySelector('#' + tabId).classList.add('active');
    evt.currentTarget.classList.add('active');
}

// 3. �������� ������
function viewItem(item) {
    const container = item.closest('.db-split-layout');
    const viewer = container.querySelector('.db-viewer');
    
    // ������ ��������, �������� �������
    viewer.querySelector('.db-viewer-empty').style.display = 'none';
    const content = viewer.querySelector('.db-viewer-content');
    content.style.display = 'block';
    
    // ��������� �������
    content.querySelector('#v-img').src = item.getAttribute('data-img');
    content.querySelector('#v-title').innerText = item.getAttribute('data-title');
    content.querySelector('#v-date').innerText = item.getAttribute('data-date');
    content.querySelector('#v-desc').innerHTML = item.getAttribute('data-desc'); // innerHTML ��� ��������� �����
    
    // �������� ����������
    content.animate([
        { opacity: 0, transform: 'translateX(10px)' },
        { opacity: 1, transform: 'translateX(0)' }
    ], { duration: 300, easing: 'ease-out' });
}

// ������� ��������� ��� ������
function viewStash(item) {
    const container = item.closest('.db-split-layout');
    const viewer = container.querySelector('.stash-viewer'); // ���� ������ ������ ������
    
    // �������� �������
    viewer.querySelector('.db-viewer-empty').style.display = 'none';
    const content = viewer.querySelector('.db-viewer-content');
    content.style.display = 'block';
    
    // ��������� �������
    content.querySelector('#s-img').src = item.getAttribute('data-img');
    content.querySelector('#s-title').innerText = item.getAttribute('data-title');
    content.querySelector('#s-type').innerText = item.getAttribute('data-type');
    content.querySelector('#s-from').innerText = item.getAttribute('data-from'); // ����� ����
    content.querySelector('#s-desc').innerHTML = item.getAttribute('data-desc');
    
    // ��������
    content.animate([
        { opacity: 0, transform: 'translateY(5px)' },
        { opacity: 1, transform: 'translateY(0)' }
    ], { duration: 200, easing: 'ease-out' });
}
</sctipt>

��

mybb@mybb.ru (root) — Tue, 23 Dec 2025 19:44:40 +0300

��:

<!--HTML-->
<div class="cp-box">

  <div class="cp-tab">
    <div class="cp-btn i_active">CUSTOM: ������� ��������� <i class="cp-mark"></i></div>
    <div class="cp-list" style="display: block;">
      
      <div class="cp-info"><b>NETDIR://[ICONS_PACK_BASIC]</b></div>
      <div class="cp-grid mode-icon">
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/9xDG0nZ.png"></div><div class="cp-title">tech</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/PTEXeJv.png"></div><div class="cp-title">body</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/c9P34Nb.png"></div><div class="cp-title">int</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/DEgaNL9.png"></div><div class="cp-title">cool</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/T1EinKB.png"></div><div class="cp-title">ref</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/u5Ke270.png"></div><div class="cp-title">rel</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/sUAprSq.png"></div><div class="cp-title">saka</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/dMGtgYr.png"></div><div class="cp-title">mltc</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/8mEV242.png"></div><div class="cp-title">petr</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/RwyvAl9.png"></div><div class="cp-title">t-t</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/MZKEyhL.png"></div><div class="cp-title">oni</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/eIdRTCt.png"></div><div class="cp-title">v's</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/4iNFaTz.png"></div><div class="cp-title">tgrs</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/ggnwZUb.png"></div><div class="cp-title">dogs</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/PLtlAOU.png"></div><div class="cp-title">mael</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/VRQxj9E.png"></div><div class="cp-title">mox</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/F465g9n.png"></div><div class="cp-title">vdb</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/3YaBtij.png"></div><div class="cp-title">er</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/zDJkJ4L.png"></div><div class="cp-title">skp</div></div>
      </div>

      <br>
      <div class="cp-info"><b>NETDIR://[PROFILE_BG_BASIC]</b></div>
      <div class="cp-grid mode-tall"> <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/AC3xLZa.png"></div><div class="cp-title">lens flare</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/go9qI4f.png"></div><div class="cp-title">city lights</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/grxzFJL.png"></div><div class="cp-title">clubbin</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/pclbyhO.png"></div><div class="cp-title">GRAFFITI</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/liVTmSP.png"></div><div class="cp-title">AURORA</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/nU9rSAd.png"></div><div class="cp-title">GLITCH</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/XP577bW.png"></div><div class="cp-title">MEGABUILDING</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/VuwSYlW.png"></div><div class="cp-title">GASOLINE</div></div>
      </div>

      <br>
      <div class="cp-info"><b>NETDIR://[PLAQUES_BASIC]</b></div>
      <div class="cp-grid mode-banner">
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/NPBtJyr.gif"></div><div class="cp-title">space</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/24m6X4W.gif"></div><div class="cp-title">glitch</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/h3hrbSu.gif"></div><div class="cp-title">chromatic</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/wyAIAQd.gif"></div><div class="cp-title">CRASH</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/fgeuN30.gif"></div><div class="cp-title">ELETAPE</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/Gt0iF17.gif"></div><div class="cp-title">NEUROPLASTICITY</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/JyEcKZh.gif"></div><div class="cp-title">TINDERS</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/AQriuZP.gif"></div><div class="cp-title">HELLFIRE</div></div>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: SUMMER HEAT <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">
        ������ ���, ������������� ����, ������ ����� � �������� �������! ������������ ������� �� ���������� ������� � ������ ������.
      </div>
      
      <div class="cp-info"><b>[����]</b></div>
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>�������:</b> ������� ������ �� ����������� ������� GAME TIME // � ��� � ��� ��� � �������?</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/t2ULXxR.png"></div>
            <div class="cp-title">Vapor</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>�������:</b> ������� ������ �� ����������� ������� GAME TIME // �� ����� ������</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/lFzI9pe.png"></div>
            <div class="cp-title">Waves</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>�������:</b> ������� ������ �� ����������� ������� GAME TIME // ������ �����</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/0v0h6xM.png"></div>
            <div class="cp-title">Ferris</div>
         </div>
      </div>

      <br>
      <div class="cp-info"><b>[������]</b></div>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-img"><img src="https://i.imgur.com/XqCFywb.gif"></div>
            <div class="cp-title">Vapor</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-img"><img src="https://i.imgur.com/gr2LfGe.gif"></div>
            <div class="cp-title">Waves</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-img"><img src="https://i.imgur.com/3X9HiyD.gif"></div>
            <div class="cp-title">Ferris</div>
         </div>
      </div>

    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: ROCKERBOYS <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">
        ������� �������, ����������� ����������� � ��� ���������� ����!
      </div>
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-legend">ROCK</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>�������:</b> ������ ��� �� ����� rpg-top � ������� �����</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/pROkDJs.png"></div>
            <div class="cp-title">LOVERS ROCK</div>
         </div>
      </div>
      <br>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
            <div class="cp-tag t-legend">ROCK</div>
            <div class="cp-img"><img src="https://upforme.ru/uploads/001c/1a/06/5/674410.gif"></div>
            <div class="cp-title">LOVERS ROCK</div>
         </div>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: NY '24 <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">�� ������� � ������������� ������������ � 16.12 �� 29.12</div>
      
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-rare">NY24</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>�������:</b> ��������, ������ ��� �������������� �������� '24</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/NcpLUVy.png"></div>
            <div class="cp-title">GOLDUST</div>
         </div>
      </div>
      <br>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
             <div class="cp-tag t-rare">NY24</div>
             <div class="cp-img"><img src="https://i.imgur.com/a6ohaH6.gif"></div>
             <div class="cp-title">GOLDUST</div>
         </div>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: HALLOWEEN '25 <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">�� ������� � ������������� ���������������� ������������ 2025-��</div>
      
      <div class="cp-info"><b>[������]</b></div>
      <div class="cp-grid mode-icon">
         <div class="cp-card">
            <div class="cp-tag t-hot">SPOOKY</div>
            <div class="cp-img"><img src="https://i.imgur.com/FIwlYeu.png"></div>
            <div class="cp-title">cyberpsycho</div>
         </div>
      </div>
      
      <br>
      <div class="cp-info"><b>[����]</b></div>
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-hot">SPOOKY</div>
            <div class="cp-img"><img src="https://i.imgur.com/p039Zhx.png"></div>
            <div class="cp-title">cyberpsycho_2</div>
         </div>
      </div>
      
      <br>
      <div class="cp-info"><b>[������]</b></div>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
            <div class="cp-tag t-hot">SPOOKY</div>
            <div class="cp-img"><img src="https://i.imgur.com/LY4ilvk.gif"></div>
            <div class="cp-title">cyberpsycho_3</div>
         </div>
      </div>

    </div>
  </div>

</div>

�� -- ��

mybb@mybb.ru (root) — Tue, 16 Dec 2025 23:53:09 +0300

��

�� : �� , �� - �� . �� /��:
[indent]> �� 500 �$
[indent]> �� 250 �$
[indent]> �� 150 �$
[indent]> �� (� �� ) � 100 �$
[indent]> �� 50 �$
[indent]> �� 100 �$
[indent]> �� /��, �� , �� , �� - ��

��

��:

<a href="������-��-������" class="lz1">��� �������</a><div class="lz2">��� �����, �������� ������� ������<br>��� <a href="������-��-�������" target="_blank">����-��</a></div>

��

��:

<div class="personal_bg"><img src="������-��-��������-210x40px"></div>

��

��:

<div class="pl_wrap" style="background: url(������-��-��������-210x300px);"><pltop>�������-�������</pltop><plbtm>������-�������</plbtm></div>

��

��:

<a id="name" class="modal-link" href="#" data-reveal-id="character"><img src="������-��-��������-24x24px" title="�����-���-���������"></a>

��! �� , �� HEX. �� , �� �� .
�� :
- �� - 210�300px.
- �� - 210x40px, �� .
- �� - 650�150px.
�� .

��

��:

<!--HTML-->
<div id="htmk_wrap" class="html-bank">
  <div class="sp_button i_active">������ <i class="select_mark"></i></div>
  <div class="sp_content-wrap" style="display: block;">
    <div class="sp_content-inner">
      <div class="sp_content-desc">
      <span class="bank_service-desc"><b class="special_b">��� ����� ������?</b> ������� � ���� ����������� ������ � ������ �� ��, ��� ������ ���-�� �����������, �� ����������������.</span>
	<span class="bank_service-desc"></span>
      </div>
      <ul class="bank_list services_preview colletions_preview">
        <li>
          <span class="services_preview-title">WELCOME TO NIGHT CITY</span>
          <img src="https://upforme.ru/uploads/001c/98/42/2/t89348.jpg">
          <span class="services_preview-desc">
            <b>�������:</b> �� �������� ������.<br>
          </span>
        </li>
        <li>
          <span class="services_preview-title">NEWBIE</span>
          <img src="https://upforme.ru/uploads/001c/98/42/2/t648852.jpg">
          <span class="services_preview-desc">
            <b>�������:</b> �� ������ �����.<br>
          </span>
        </li>
        <li>
          <span class="services_preview-title">OLD BUT[T] GOLD</span>
          <img src="https://upforme.ru/uploads/001c/98/42/2/t957592.jpg">
          <span class="services_preview-desc">
            <b>�������:</b> �� ������ ������ ����.<br>
          </span>
        </li>
        <li>
          <span class="services_preview-title">ROACH: BONUS LVL</span>
          <img src="https://upforme.ru/uploads/001c/98/42/2/t317316.jpg">
          <span class="services_preview-desc">
            <b>�������:</b> �� �������� �������� ������� ������� ��������� �� ��� ���������� ����� 2025! 
          </span>
        </li>
        <li>
          <span class="services_preview-title">COMPLETIONIST</span>
          <img src="https://upforme.ru/uploads/001c/98/42/2/t615644.jpg">
          <span class="services_preview-desc">
            <b>�������:</b> �� ���������� ��������� ���������� ����� 2025 �� 110%
          </span>
        </li>
        <li>
          <span class="services_preview-title">404</span>
          <img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png">
          <span class="services_preview-desc">
            <b>�������:</b> ������� ����� � ������
          </span>
        </li>
        <li>
          <span class="services_preview-title">404</span>
          <img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png">
          <span class="services_preview-desc">
            <b>�������:</b> ������� ����� � ������
          </span>
        </li>
        <li>
          <span class="services_preview-title">404</span>
          <img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png">
          <span class="services_preview-desc">
            <b>�������:</b> ������� ����� � ������
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>
<script>
$('.sp_button').click(function() {  
    $('.sp_button').not(this).removeClass('i_active');
    $(this).toggleClass('i_active');
});

$('.sp_button').each(function() {
    $(this).on('click', function() { $('.sp_button').not($(this)).next().slideUp();
      $(this).next().slideToggle(); 
    });
  });
</script>

��

��:

[b]1. ���:[/b] 
�������� ��� �������� � ������� ����� (���� ���-�� � ������� - ���������� ���������� �������)
[b]2. �����:[/b]
���������� ���� � ������� - ����� ������� = �������� �����
[b]3. ��������:[/b]
�������� ������ �������

��

��:

1. ���: ctrl+c > ctrl+v ��������
2. ���� (���� �����)

��

mybb@mybb.ru (root) — Sun, 14 Dec 2025 21:51:47 +0300

��:

<!--HTML-->
<div class="cyberpunk-display">
   <div class="cyberpunk-container">

    <!-- Cyber Toys Section -->
    <div class="cyber-section">
      <div class="cyber-button i_active">������������ <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: block;">
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/629438.webp" alt="cyber-toy-1">
               </div>
               <div class="cyber-card-title">��� 1</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/21322.webp" alt="cyber-toy-2">
               </div>
               <div class="cyber-card-title">��� 2</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/793443.webp" alt="cyber-toy-3">
               </div>
               <div class="cyber-card-title">��� 3</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/880561.webp" alt="cyber-toy-4">
               </div>
               <div class="cyber-card-title">��� 4</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/406707.webp" alt="cyber-toy-5">
               </div>
               <div class="cyber-card-title">��� 5</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/754796.webp" alt="cyber-toy-6">
               </div>
               <div class="cyber-card-title">��� 6</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/529505.webp" alt="cyber-toy-7">
               </div>
               <div class="cyber-card-title">��� 7</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/40022.webp" alt="cyber-toy-8">
               </div>
               <div class="cyber-card-title">��� 8</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/955053.webp" alt="cyber-toy-9">
               </div>
               <div class="cyber-card-title">��� 9</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/636071.webp" alt="cyber-toy-10">
               </div>
               <div class="cyber-card-title">��� 10</div>
            </div>

            <!-- Card 11 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/640147.webp" alt="cyber-toy-11">
               </div>
               <div class="cyber-card-title">��� 11</div>
            </div>

            <!-- Card 12 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/27745.webp" alt="cyber-toy-12">
               </div>
               <div class="cyber-card-title">��� 12</div>
            </div>

            <!-- Card 13 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/958430.webp" alt="cyber-toy-13">
               </div>
               <div class="cyber-card-title">��� 13</div>
            </div>

            <!-- Card 14 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/467899.webp" alt="cyber-toy-14">
               </div>
               <div class="cyber-card-title">��� 14</div>
            </div>

            <!-- Card 15 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/389246.webp" alt="cyber-toy-15">
               </div>
               <div class="cyber-card-title">��� 15</div>
            </div>

            <!-- Card 16 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/745679.webp" alt="cyber-toy-16">
               </div>
               <div class="cyber-card-title">��� 16</div>
            </div>

            <!-- Card 17 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/119644.webp" alt="cyber-toy-17">
               </div>
               <div class="cyber-card-title">��� 17</div>
            </div>

            <!-- Card 18 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/13807.webp" alt="cyber-toy-18">
               </div>
               <div class="cyber-card-title">��� 18</div>
            </div>

            <!-- Card 19 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/95737.webp" alt="cyber-toy-19">
               </div>
               <div class="cyber-card-title">��� 19</div>
            </div>

            <!-- Card 20 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/972087.webp" alt="cyber-toy-20">
               </div>
               <div class="cyber-card-title">��� </div>
            </div>

            <!-- Card 21 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/907558.webp" alt="cyber-toy-21">
               </div>
               <div class="cyber-card-title">��� 21</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">��������� ��� ����� � ������ <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp" alt="champaradise">
               </div>
               <div class="cyber-card-title">�����������</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������ ����� ����������.</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/191350.webp" alt="�entzon-�otochtin">
               </div>
               <div class="cyber-card-title">������ ��������</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������, ������� ��� ������.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/857309.webp" alt="ab-synth">
               </div>
               <div class="cyber-card-title">��-����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">���� �������.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/846521.webp" alt="sake-utagawa">
               </div>
               <div class="cyber-card-title">���� �������</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��������� ������� ����.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/149402.webp" alt="romvlvs-gin">
               </div>
               <div class="cyber-card-title">������� ����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������ ������ ��������.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760926.webp" alt="paul-night">
               </div>
               <div class="cyber-card-title">��� ����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������� ������� ���������� � ����������.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/875284.webp" alt="chateau-delen-2012">
               </div>
               <div class="cyber-card-title">���� ����� 2012</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� 200 �������. �������� �����.</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/368756.webp" alt="calavera-feliz">
               </div>
               <div class="cyber-card-title">�������� �����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������? ��������.</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/988568.webp" alt="baalbek-arak">
               </div>
               <div class="cyber-card-title">�������� ����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ���������� ��� ���������� ������ � �������.</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/716470.webp" alt="armagnac-massy">
               </div>
               <div class="cyber-card-title">�������� �����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ��� - ����������� ��.</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">������� <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/882397.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 1</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����������. ����������������. ��������.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/192237.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 2</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��� ��������� ��������, �������������� ������������.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/799466.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 3</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� ��������� - ���� ���.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/718754.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 4</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� � ���������� - ������������� ���� �����.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760043.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 5</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��, ����� ����, �� ����� ���������� ��������, ���� �� ����!</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/977520.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 6</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ������ �������� ���, ��� ������. ���� ������ ������! ��... �� �� �� ���������� ��� ��� ����������� � ��������?</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/764287.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 7</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ������. ��� �� ��. ��� �� �����.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/788704.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 8</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��� ��������� �������, ����, ��������� � ������� �����.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/596202.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 9</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��������, �� ������.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/290411.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 10</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� ���� 12 ����, � �� ������� �� �������� ��� �������� ������.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/178922.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 11</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">� ��� ����� �������??</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/612284.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">������� 12</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� ������ �� ����� ��������</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Gifts Section -->
    <div class="cyber-section">
      <div class="cyber-button">������ <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-grid cyber-gift-wrap">
                  <!-- Card 1 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/331657.png" alt="gift-wrap-1">
                     </div>
                     <div class="cyber-card-title">������ 1</div>
                  </div>

                  <!-- Card 2 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/928253.png" alt="gift-wrap-2">
                     </div>
                     <div class="cyber-card-title">������ 2</div>
                  </div>

                  <!-- Card 3 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/277088.png" alt="gift-wrap-3">
                     </div>
                     <div class="cyber-card-title">������ 3</div>
                  </div>

                  <!-- Card 4 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/231943.png" alt="gift-wrap-4">
                     </div>
                     <div class="cyber-card-title">������ 4</div>
                  </div>

                  <!-- Card 5 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/725147.png" alt="gift-wrap-5">
                     </div>
                     <div class="cyber-card-title">������ 5</div>
                  </div>

                  <!-- Card 6 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/238980.png" alt="gift-wrap-6">
                     </div>
                     <div class="cyber-card-title">������ 6</div>
                  </div>

                  <!-- Card 7 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/10243.png" alt="gift-wrap-7">
                     </div>
                     <div class="cyber-card-title">������ 7</div>
                  </div>

                  <!-- Card 8 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/906973.png" alt="gift-wrap-8">
                     </div>
                     <div class="cyber-card-title">������ 8</div>
                  </div>

                  <!-- Card 9 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/674472.png" alt="gift-wrap-9">
                     </div>
                     <div class="cyber-card-title">������ 9</div>
                  </div>

                  <!-- Card 10 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/203248.png" alt="gift-wrap-10">
                     </div>
                     <div class="cyber-card-title">������ 10</div>
                  </div>

                  <!-- Card 11 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/893306.png" alt="gift-wrap-11">
                     </div>
                     <div class="cyber-card-title">������ 11</div>
                  </div>

                  <!-- Card 12 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/286136.png" alt="gift-wrap-12">
                     </div>
                     <div class="cyber-card-title">������ 12</div>
                  </div>

                  <!-- Card 13 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/614346.png" alt="gift-wrap-13">
                     </div>
                     <div class="cyber-card-title">������ 13</div>
                  </div>

                  <!-- Card 14 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/374523.png" alt="gift-wrap-14">
                     </div>
                     <div class="cyber-card-title">������ 14</div>
                  </div>

                  <!-- Card 15 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/920551.png" alt="gift-wrap-15">
                     </div>
                     <div class="cyber-card-title">������ 15</div>
                  </div>

                  <!-- Card 16 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/142570.png" alt="gift-wrap-16">
                     </div>
                     <div class="cyber-card-title">������ 16</div>
                  </div>

                  <!-- Card 17 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/935133.png" alt="gift-wrap-17">
                     </div>
                     <div class="cyber-card-title">������ 17</div>
                  </div>

                  <!-- Card 18 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/226506.png" alt="gift-wrap-18">
                     </div>
                     <div class="cyber-card-title">������ 18</div>
                  </div>

                  <!-- Card 19 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/46864.png" alt="gift-wrap-19">
                     </div>
                     <div class="cyber-card-title">������ 19</div>
                  </div>

                  <!-- Card 20 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/501053.png" alt="gift-wrap-20">
                     </div>
                     <div class="cyber-card-title">������ 20</div>
                  </div>

                  <!-- Card 21 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/742988.png" alt="gift-wrap-21">
                     </div>
                     <div class="cyber-card-title">������ 21</div>
                  </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* ================================================
   Scoped Styles for Cyberpunk Display
=============================================== */
.cyberpunk-display {
  --background-card: rgba(19, 19, 22, 0.9); /* Dark background for cards */
  --background-hover: rgba(32, 32, 45, 0.9); /* Subtle hover background */
  --color-text: #f5f5f5; /* Light text for readability */
  --color-accent: #FFE81F; /* Cyberpunk yellow */
  --color-hover: #FF007E; /* Hot pink Neomancer */
  --color-border: rgba(255, 248, 31, 0.5); /* Faint yellow border */
  --font-primary: 'Orbitron', 'Roboto', monospace;
  --font-title: 'Orbitron', 'Roboto', monospace;
  --radius: 10px;
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-large: 20px;
}

.cyberpunk-display * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cyberpunk-display .cyberpunk-container {
  width: 100%;
  max-width: 1200px;
  margin: var(--spacing-medium) auto;
  padding: var(--spacing-large);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* ================================================
   Section Titles
=============================================== */
.cyberpunk-display .cyber-title {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  color: var(--color-hover);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--color-hover);
}

/* ================================================
   Grid Layout
=============================================== */
.cyberpunk-display .cyber-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-medium);
}

/* ================================================
   Individual Cards
=============================================== */
.cyberpunk-display .cyber-card {
  position: relative;
  width: 120px;
  background: var(--background-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  padding: 1px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%); /* ��������� ��������� ���� ������ � �������, � �� � ����������� */
}

/* Image Behavior */
.cyberpunk-display .cyber-image-wrapper {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cyberpunk-display .cyber-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, z-index 0.3s ease;
  padding: 1px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Enlarges the image */
  filter: saturate(150%) brightness(110%);
  z-index: 10; /* Brings the image to the front */
  box-shadow: 0px 5px 8px -4px rgba(255, 255, 31, 0.8), 
              0px 8px 10px -4px rgba(255, 0, 126, 0.6); /* ��������� ������ ����� */
}

/*�������������� ������*/
#cyber-gifts .cyber-image-wrapper {
  width: 100%;
  height: 100px; /* ������ �������� ����� ������ �������� */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* �������� ����� �����������, ������� ������� �� ������� */
}

#cyber-gifts .cyber-image-wrapper img {
  width: 100%; /* ��������� ��� ������ ���������� ������������ */
  height: 100%; /* ��������� ��� ������ ���������� ������������ */
  object-fit: cover; /* �������� �����������, ����� ��������� �������, �������� ��������� */
  transition: transform 0.3s ease; /* ��������� ������� ���������� ��� ��������� */
}

#cyber-gifts .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* ����������� ����������� ��� ��������� */
}

/* Hover Effect for Card */
.cyberpunk-display .cyber-card:hover {
  background: var(--background-hover);
  box-shadow: 0 0 16px 0 rgba(255, 255, 31, 0.6), 0px 0px 12px 0 var(--color-hover);
  transform: translateY(-3px);
}

/* ���������� ����� ��� ������ */
.cyberpunk-display .cyber-gift-wrap .cyber-image-wrapper {
  width: 100%;
  height: 120px; /* ������ ������, ����� �������� �� ����� ������������� ������ */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* �������� ��������� �� ������� ����� ����������� */
  background-color: rgba(0, 0, 0, 0.7); /* ��� ��� �������, ����� ����������� ������ ���������� */
}

.cyberpunk-display .cyber-gift-wrap .cyber-image-wrapper img {
  width: 100%; /* ��������� ������ ���������� */
  height: 100%; /* ��������� ������ ���������� */
  object-fit: cover; /* �������� �����������, ����� ��������� ��������� ��� ��������� */
  transition: transform 0.3s ease; /* ������� ���������� ��� ��������� */
}

.cyberpunk-display .cyber-gift-wrap .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* ���������� ����������� ��� ��������� */
}

/* Text Below Image */
.cyberpunk-display .cyber-card-title {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.8);
  padding: var(--spacing-small);
  /*border-radius: var(--radius-small);*/
  margin-top: var(--spacing-small);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* ������ ��� ��������� ����� �� �������� */
  .cyber-card:hover & {
    color: var(--color-hover); /* ������ ���� ������ ��������� �� ������� (hover) */
    transition: all 0.3s ease; /* ������� ������� */
  }
}

/* Expand indicator (triangle) */
.cyberpunk-display .cyber-expand-indicator {
  width: 0;
  height: 0;
  margin: 3px auto 3px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent); /* Yellow Triangle */
  transition: transform 0.3s ease;
}

/* Initially hide the description text */
.cyberpunk-display .cyber-card-description {
  opacity: 0; /* �������� ����� */
  max-height: 0; /* ������������ ������ */
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 10px;
  color: #aaaaaa;
  text-align: left;
  margin: 0 1em 0.25em;
  line-height: 1.4;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show the description on hover */
.cyberpunk-display .cyber-card:hover .cyber-card-description {
  opacity: 1; /* ���������� ����� */
  max-height: 100px; /* ����������� ������ ��� ����������� ������ */
}

.cyberpunk-display .cyber-card:hover .cyber-expand-indicator {
  transform: rotate(180deg); /* Flip the triangle to point upwards */
  margin-bottom: var(--spacing-small); /* Add spacing when hovered */
}

/* ================================================
   ����������� �������������
=============================================== */

.cyberpunk-display .cyber-section {
   margin-bottom: 0px; /* ���������� ����� �������� */
}

.cyberpunk-display .cyber-button {
  cursor: pointer;
  background: rgba(19, 19, 22, 0.9); /* ������� ���� ������ */
  color: #FFE81F; /* ���� ������ ������ */
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  transition: all 0.3s ease;
}

.cyberpunk-display .cyber-button:hover {
  background: rgba(32, 32, 45, 0.9);
  color: #FF007E;
}

.cyberpunk-display .cyber-button.i_active {
  background: rgba(32, 32, 45, 0.9); /* ��� �������� ������ */
  color: #FF007E; /* ���� ������ �������� ������ */
  text-transform: uppercase;
}

.cyberpunk-display .cyber-content-wrap {
  display: none; /* ������� ������ �� ��������� */
  background: rgba(19, 19, 22, 0.9); /* ��� ������ */
  padding: 15px;
}

.cyberpunk-display .cyber-content-wrap .cyber-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cyberpunk-display .cyber-button .select-mark {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent); /* Yellow Triangle */
  transition: transform 0.3s ease;

}

.cyberpunk-display .cyber-button.i_active .select-mark {
  transform: rotate(-180deg); /* ��������� ��������� */
}

/* ================================================
   Responsive Design
=============================================== */
@media (max-width: 768px) {

.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 10px;
  }
}
</style>

<script>

  document.querySelectorAll('.cyber-button').forEach(button => {
    button.addEventListener('click', () => {
      const content = button.nextElementSibling;

      // ����������� ��� �������� ������
      document.querySelectorAll('.cyber-content-wrap').forEach(otherContent => {
        if (otherContent !== content) {
          otherContent.style.display = 'none';
          otherContent.previousElementSibling.classList.remove('i_active');
        }
      });

      // ����������� ������� ������
      if (content.style.display === 'block') {
        content.style.display = 'none';
        button.classList.remove('i_active');
      } else {
        content.style.display = 'block';
        button.classList.add('i_active');
      }
    });
  });

</script>

[hideprofile]

�� - ��

mybb@mybb.ru (root) — Sat, 13 Dec 2025 22:05:50 +0300

��:

<!--HTML-->
<div class="cyberpunk-display">
    <div class="cyberpunk-container">

<!-- Cyber Toys Section -->
<div id="cyber-toys">
  <div class="cyber-title">������������:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/629438.webp" alt="cyber-toy-1">
      </div>
      <div class="cyber-card-title">��� 1</div>
    </div>

    <!-- Card 2 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/21322.webp" alt="cyber-toy-2">
      </div>
      <div class="cyber-card-title">��� 2</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/793443.webp" alt="cyber-toy-3">
      </div>
      <div class="cyber-card-title">��� 3</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/880561.webp" alt="cyber-toy-4">
      </div>
      <div class="cyber-card-title">��� 4</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/406707.webp" alt="cyber-toy-5">
      </div>
      <div class="cyber-card-title">��� 5</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/754796.webp" alt="cyber-toy-6">
      </div>
      <div class="cyber-card-title">��� 6</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/529505.webp" alt="cyber-toy-7">
      </div>
      <div class="cyber-card-title">��� 7</div>
    </div>

    <!-- Card 8 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/40022.webp" alt="cyber-toy-8">
      </div>
      <div class="cyber-card-title">��� 8</div>
    </div>

    <!-- Card 9 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/955053.webp" alt="cyber-toy-9">
      </div>
      <div class="cyber-card-title">��� 9</div>
    </div>

    <!-- Card 10 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/636071.webp" alt="cyber-toy-10">
      </div>
      <div class="cyber-card-title">��� 10</div>
    </div>

    <!-- Card 11 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/640147.webp" alt="cyber-toy-11">
      </div>
      <div class="cyber-card-title">��� 11</div>
    </div>

    <!-- Card 12 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/27745.webp" alt="cyber-toy-12">
      </div>
      <div class="cyber-card-title">��� 12</div>
    </div>

    <!-- Card 13 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/958430.webp" alt="cyber-toy-13">
      </div>
      <div class="cyber-card-title">��� 13</div>
    </div>

    <!-- Card 14 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/467899.webp" alt="cyber-toy-14">
      </div>
      <div class="cyber-card-title">��� 14</div>
    </div>

    <!-- Card 15 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/389246.webp" alt="cyber-toy-15">
      </div>
      <div class="cyber-card-title">��� 15</div>
    </div>

    <!-- Card 16 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/745679.webp" alt="cyber-toy-16">
      </div>
      <div class="cyber-card-title">��� 16</div>
    </div>

    <!-- Card 17 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/119644.webp" alt="cyber-toy-17">
      </div>
      <div class="cyber-card-title">��� 17</div>
    </div>

    <!-- Card 18 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/13807.webp" alt="cyber-toy-18">
      </div>
      <div class="cyber-card-title">��� 18</div>
    </div>

    <!-- Card 19 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/95737.webp" alt="cyber-toy-19">
      </div>
      <div class="cyber-card-title">��� 19</div>
    </div>

    <!-- Card 20 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/972087.webp" alt="cyber-toy-20">
      </div>
      <div class="cyber-card-title">��� </div>
    </div>

    <!-- Card 21 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/907558.webp" alt="cyber-toy-21">
      </div>
      <div class="cyber-card-title">��� 21</div>
    </div>

  </div>
</div>

<!-- Cyber Decorations Section -->
<div id="cyber-decor">
  <div class="cyber-title">��������� ��� ����� � ������:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp" alt="champaradise">
      </div>
      <div class="cyber-card-title">�����������</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">������ ����� ����������.</div>
    </div>

    <!-- Card 2 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/191350.webp" alt="�entzon-�otochtin">
      </div>
      <div class="cyber-card-title">������ ��������</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">������, ������� ��� ������.</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/857309.webp" alt="ab-synth">
      </div>
      <div class="cyber-card-title">��-����</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">���� �������.</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/846521.webp" alt="sake-utagawa">
      </div>
      <div class="cyber-card-title">���� �������</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">��������� ������� ����.</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/149402.webp" alt="romvlvs-gin">
      </div>
      <div class="cyber-card-title">������� ����</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">������ ������ ��������.</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/760926.webp" alt="paul-night">
      </div>
      <div class="cyber-card-title">��� ����</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">������� ������� ���������� � ����������.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/875284.webp" alt="chateau-delen-2012">
      </div>
      <div class="cyber-card-title">���� ����� 2012</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">����� 200 �������. �������� �����.</div>
    </div>

    <!-- Card 8 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/368756.webp" alt="calavera-feliz">
      </div>
      <div class="cyber-card-title">�������� �����</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">������? ��������.</div>
    </div>

    <!-- Card 9 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/988568.webp" alt="baalbek-arak">
      </div>
      <div class="cyber-card-title">�������� ����</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">�� ���������� ��� ���������� ������ � �������.</div>
    </div>

    <!-- Card 10 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/716470.webp" alt="armagnac-massy">
      </div>
      <div class="cyber-card-title">�������� �����</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">�� ��� - ����������� ��.</div>
    </div>
  </div>
</div>

<!-- Cyber Gifts Section -->
<div id="cyber-gifts">
  <div class="cyber-title">����� ���������� �������:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/882397.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 1</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">����������. ����������������. ��������.</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/192237.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 2</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">��� ��������� ��������, �������������� ������������.</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/799466.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 3</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">����� ��������� - ���� ���.</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/718754.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 4</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">����� � ���������� - ������������� ���� �����.</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/760043.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 5</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">��, ����� ����, �� ����� ���������� ��������, ���� �� ����!</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/977520.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 6</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">�� ������ �������� ���, ��� ������. ���� ������ ������! ��... �� �� �� ���������� ��� ��� ����������� � ��������?</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/764287.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 7</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">�� ������. ��� �� ��. ��� �� �����.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/788704.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 8</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">��� ��������� �������, ����, ��������� � ������� �����.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/596202.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 9</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">��������, �� ������.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/290411.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 10</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">����� ���� 12 ����, � �� ������� �� �������� ��� �������� ������.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/178922.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 11</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">� ��� ����� �������??</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/612284.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������� 12</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">����� ������ �� ����� ��������</div>
    </div>

<!-- Cyber Gifts Section -->
<div id="cyber-gifts">
  <div class="cyber-title">����������� ��� ��������:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/331657.png" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">������ 1</div>
    </div>

    <!-- Card 2 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/928253.png" alt="gift-wrap-2">
      </div>
      <div class="cyber-card-title">������ 2</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/277088.png" alt="gift-wrap-3">
      </div>
      <div class="cyber-card-title">������ 3</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/231943.png" alt="gift-wrap-4">
      </div>
      <div class="cyber-card-title">������ 4</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/725147.png" alt="gift-wrap-5">
      </div>
      <div class="cyber-card-title">������ 5</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/238980.png" alt="gift-wrap-6">
      </div>
      <div class="cyber-card-title">������ 6</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/10243.png" alt="gift-wrap-7">
      </div>
      <div class="cyber-card-title">������ 7</div>
    </div>

    <!-- Card 8 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/906973.png" alt="gift-wrap-8">
      </div>
      <div class="cyber-card-title">������ 8</div>
    </div>

    <!-- Card 9 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/674472.png" alt="gift-wrap-9">
      </div>
      <div class="cyber-card-title">������ 9</div>
    </div>

    <!-- Card 10 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/203248.png" alt="gift-wrap-10">
      </div>
      <div class="cyber-card-title">������ 10</div>
    </div>

    <!-- Card 11 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/893306.png" alt="gift-wrap-11">
      </div>
      <div class="cyber-card-title">������ 11</div>
    </div>

    <!-- Card 12 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/286136.png" alt="gift-wrap-12">
      </div>
      <div class="cyber-card-title">������ 12</div>
    </div>

    <!-- Card 13 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/614346.png" alt="gift-wrap-13">
      </div>
      <div class="cyber-card-title">������ 13</div>
    </div>

    <!-- Card 14 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/374523.png" alt="gift-wrap-14">
      </div>
      <div class="cyber-card-title">������ 14</div>
    </div>

    <!-- Card 15 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/920551.png" alt="gift-wrap-15">
      </div>
      <div class="cyber-card-title">������ 15</div>
    </div>

    <!-- Card 16 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/142570.png" alt="gift-wrap-16">
      </div>
      <div class="cyber-card-title">������ 16</div>
    </div>

    <!-- Card 17 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/935133.png" alt="gift-wrap-17">
      </div>
      <div class="cyber-card-title">������ 17</div>
    </div>

    <!-- Card 18 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/226506.png" alt="gift-wrap-18">
      </div>
      <div class="cyber-card-title">������ 18</div>
    </div>

    <!-- Card 19 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/46864.png" alt="gift-wrap-19">
      </div>
      <div class="cyber-card-title">������ 19</div>
    </div>

    <!-- Card 20 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/501053.png" alt="gift-wrap-20">
      </div>
      <div class="cyber-card-title">������ 20</div>
    </div>

    <!-- Card 21 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/742988.png" alt="gift-wrap-21">
      </div>
      <div class="cyber-card-title">������ 21</div>
    </div>

    </div>

  </div>
</div>

<style>
/* ================================================
   Scoped Styles for Cyberpunk Display
=============================================== */
.cyberpunk-display {
  --background-card: rgba(19, 19, 22, 0.9); /* Dark background for cards */
  --background-hover: rgba(32, 32, 45, 0.9); /* Subtle hover background */
  --color-text: #f5f5f5; /* Light text for readability */
  --color-accent: #FFE81F; /* Cyberpunk yellow */
  --color-accent-transparent: rgba(255, 216, 31, 0.5); /* �������������� ������ */
  --color-hover: #FF007E; /* Hot pink Neomancer */
  --color-border: rgba(255, 248, 31, 0.5); /* Faint yellow border */
  --font-primary: 'Orbitron', monospace;
  --font-title: 'Orbitron', monospace;
  --radius: 10px;
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-large: 20px;
}

.cyberpunk-display * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cyberpunk-display .cyberpunk-container {
  width: 100%;
  max-width: 1200px;
  margin: var(--spacing-medium) auto;
  padding: var(--spacing-large);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* ================================================
   Section Titles
=============================================== */
.cyberpunk-display .cyber-title {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  color: var(--color-hover);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--color-hover);
}

/* ================================================
   Grid Layout
=============================================== */
.cyberpunk-display .cyber-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-medium);
}

/* ================================================
   Individual Cards
=============================================== */
.cyberpunk-display .cyber-card {
  position: relative;
  width: 120px;
  background: var(--background-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  padding: 1px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%); /* ��������� ��������� ���� ������ � �������, � �� � ����������� */
}

/* Image Behavior */
.cyberpunk-display .cyber-image-wrapper {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cyberpunk-display .cyber-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, z-index 0.3s ease;
  padding: 1px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Enlarges the image */
  filter: saturate(150%) brightness(110%);
  z-index: 10; /* Brings the image to the front */
  box-shadow: 0px 5px 8px -4px rgba(255, 255, 31, 0.8), 
              0px 8px 10px -4px rgba(255, 0, 126, 0.6); /* ��������� ������ ����� */
}

/*�������������� ������*/
#cyber-gifts .cyber-image-wrapper {
  width: 100%;
  height: 100px; /* ������ �������� ����� ������ �������� */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* �������� ����� �����������, ������� ������� �� ������� */
}

#cyber-gifts .cyber-image-wrapper img {
  width: 100%; /* ��������� ��� ������ ���������� ������������ */
  height: 100%; /* ��������� ��� ������ ���������� ������������ */
  object-fit: cover; /* �������� �����������, ����� ��������� �������, �������� ��������� */
  transition: transform 0.3s ease; /* ��������� ������� ���������� ��� ��������� */
}

#cyber-gifts .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* ����������� ����������� ��� ��������� */
}

/* Hover Effect for Card */
.cyberpunk-display .cyber-card:hover {
  background: var(--background-hover);
  box-shadow: 0 0 16px 0 rgba(255, 255, 31, 0.6), 0px 0px 12px 0 var(--color-hover);
  transform: translateY(-3px);
}

/* Text Below Image */
.cyberpunk-display .cyber-card-title {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.8);
  padding: var(--spacing-small);
  /*border-radius: var(--radius-small);*/
  margin-top: var(--spacing-small);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* ������ ��� ��������� ����� �� �������� */
  .cyber-card:hover & {
    color: var(--color-hover); /* ������ ���� ������ ��������� �� ������� (hover) */
    transition: all 0.3s ease; /* ������� ������� */
  }
}

/* Expand indicator (triangle) */
.cyberpunk-display .cyber-expand-indicator {
  width: 0;
  height: 0;
  margin: 3px auto 3px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent); /* Yellow Triangle */
  transition: transform 0.3s ease;
}

/* Initially hide the description text */
.cyberpunk-display .cyber-card-description {
  opacity: 0; /* �������� ����� */
  max-height: 0; /* ������������ ������ */
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 10px;
  color: #aaaaaa;
  text-align: left;
  margin: 0 1em 0.25em;
  line-height: 1.4;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show the description on hover */
.cyberpunk-display .cyber-card:hover .cyber-card-description {
  opacity: 1; /* ���������� ����� */
  max-height: 100px; /* ����������� ������ ��� ����������� ������ */
}

.cyberpunk-display .cyber-card:hover .cyber-expand-indicator {
  transform: rotate(180deg); /* Flip the triangle to point upwards */
  margin-bottom: var(--spacing-small); /* Add spacing when hovered */
}

/* ================================================
   Responsive Design
=============================================== */
@media (max-width: 768px) {

.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 10px;
  }
}
</style>

[hideprofile]

��

mybb@mybb.ru (root) — Sat, 13 Dec 2025 15:48:38 +0300

� �� !

��, �� - �� . �� : �� , �� . �� , � �� , �� . �� -��, �� .
�� , ��, �� - �� - �� (�� ).

�� , � �� , �� -�� , �� .

��? �� , �� , �� ! ��!

��

�� 

�� ?

1. �� 
�� . �� , �� !
[indent]- �� �� ! �� : �� , ��-�� -�� �� .
[indent]- �� , �� , �� , �� .
[indent]- �� ? �� (�� -��, �� ).
2. �� 
�� ? �� , � �� , �� . �� : �� , �� - ��!
[indent]- �� ? �� , � �� ! �� :
[indent][indent] 1. �� “�� ”. �� ! ��, �� , �� , �� , � �� - �� .
[indent][indent] 2. Purrr the fuck up, Samurai, we have biscuits to bake. �� - ��, �� - �� .
[indent][indent] 3. Fashion is my passion. �� - �� /�� /�� (��, �� - �� ).

[indent]- �� ? �� , �� ?
[indent]- �� ? �� PON PON SHIT, �� ? �� . �� , �� .

�� ?
1 �� = 15 ��, � �� - �� , �� .
3. �� 
�� - �� , �� , �� , �� (��).

�� :
- �� �� , �� , �� �� . �� (�� ).
- �� ��, ��  � �� ��.
��! �� "�� ", �� . �� .
- �� ��  c�� �� . ��, �� -�� , �� !
4. �� ?
�� - �� , �� . �� , �� . �� :
[indent]- �� �� �� , �� 14 ��, �� +1 ��.
[indent]- �� - ��, �� , ��, ��... � �� "��"!

� �� ?
...� 31 �� , �� - �� - ��, �� .

� �� , �� , �� �� . �� , �� ... � �� !

��:

<!--HTML-->
<div class="cyberpunk-display">
   <div class="cyberpunk-container">

    <!-- Cyber Toys Section -->
    <div class="cyber-section">
      <div class="cyber-button i_active">������������ <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: block;">
         <div class="cyber-description">������ ������ ���������, ������ ��������� �� ������� ��������, ������� ���������. ��������� � ������� �������!</div>
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/629438.webp" alt="cyber-toy-1">
               </div>
               <div class="cyber-card-title">1: Militech</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/21322.webp" alt="cyber-toy-2">
               </div>
               <div class="cyber-card-title">2: Taste Japan</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/793443.webp" alt="cyber-toy-3">
               </div>
               <div class="cyber-card-title">3: Santa Muerte</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/880561.webp" alt="cyber-toy-4">
               </div>
               <div class="cyber-card-title">4: Arasaka Light</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/406707.webp" alt="cyber-toy-5">
               </div>
               <div class="cyber-card-title">5: Welcome to NC</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/754796.webp" alt="cyber-toy-6">
               </div>
               <div class="cyber-card-title">6: Glitter, Beach!</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/529505.webp" alt="cyber-toy-7">
               </div>
               <div class="cyber-card-title">7: Burning Success</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/40022.webp" alt="cyber-toy-8">
               </div>
               <div class="cyber-card-title">8: Kerry On</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/955053.webp" alt="cyber-toy-9">
               </div>
               <div class="cyber-card-title">9: Don’t Cry Tygers</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/636071.webp" alt="cyber-toy-10">
               </div>
               <div class="cyber-card-title">10: DeLuze</div>
            </div>

            <!-- Card 11 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/640147.webp" alt="cyber-toy-11">
               </div>
               <div class="cyber-card-title">11: Trauma 2 UR ❤️</div>
            </div>

            <!-- Card 12 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/27745.webp" alt="cyber-toy-12">
               </div>
               <div class="cyber-card-title">12: Splash of Love</div>
            </div>

            <!-- Card 13 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/958430.webp" alt="cyber-toy-13">
               </div>
               <div class="cyber-card-title">13: Stick It In</div>
            </div>

            <!-- Card 14 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/467899.webp" alt="cyber-toy-14">
               </div>
               <div class="cyber-card-title">14: Foreign Beauty</div>
            </div>

            <!-- Card 15 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/389246.webp" alt="cyber-toy-15">
               </div>
               <div class="cyber-card-title">15: Friend Like Me</div>
            </div>

            <!-- Card 16 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/745679.webp" alt="cyber-toy-16">
               </div>
               <div class="cyber-card-title">16: One shot, One kill</div>
            </div>

            <!-- Card 17 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/119644.webp" alt="cyber-toy-17">
               </div>
               <div class="cyber-card-title">17: Ready to Rrrumble!</div>
            </div>

            <!-- Card 18 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/13807.webp" alt="cyber-toy-18">
               </div>
               <div class="cyber-card-title">18: Knobby Spine</div>
            </div>

            <!-- Card 19 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/95737.webp" alt="cyber-toy-19">
               </div>
               <div class="cyber-card-title">19: Glistens</div>
            </div>

            <!-- Card 20 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/972087.webp" alt="cyber-toy-20">
               </div>
               <div class="cyber-card-title">20: Spirit of America</div>
            </div>

            <!-- Card 21 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/907558.webp" alt="cyber-toy-21">
               </div>
               <div class="cyber-card-title">21: Naughty U!</div>

            </div>
           
            <!-- Card 22 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/634609.webp" alt="cyber-toy-22">
               </div>
               <div class="cyber-card-title">22: Cardinally Awesome</div>
            </div>
    	
            <!-- Card 23 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/900682.webp" alt="cyber-toy-23">
               </div>
               <div class="cyber-card-title">23: Black Dog</div>
            </div>
    	
            <!-- Card 24 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/358340.webp" alt="cyber-toy-24">
               </div>
               <div class="cyber-card-title">24: Maneki Neko</div>
            </div>

            <!-- Card 25 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/298794.webp" alt="cyber-toy-25">
               </div>
               <div class="cyber-card-title">25: Little Outsider</div>
            </div>
    	
            <!-- Card 26 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/308712.webp" alt="cyber-toy-26">
               </div>
               <div class="cyber-card-title">26: Letz Danz @ Totentanz</div>
            </div>

            <!-- Card 27 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/410212.webp" alt="cyber-toy-27">
               </div>
               <div class="cyber-card-title">27: Nice Axe</div>
            </div>
    	
            <!-- Card 28 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/676596.webp" alt="cyber-toy-28">
               </div>
               <div class="cyber-card-title">28: BEFOREDEATH</div>
            </div>
    	
            <!-- Card 29 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/471549.webp" alt="cyber-toy-29">
               </div>
               <div class="cyber-card-title">29: North Pole</div>
            </div>
    	
            <!-- Card 30 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- ������ -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/612345.webp" alt="cyber-toy-23">
               </div>
               <div class="cyber-card-title">30: David: goes brrrr</div>
            </div>

          <!-- More cards go here -->
        </div>
      </div>


    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">����� ��� ������ <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
                  <div class="cyber-description">������ ��� ���� ������ �������� �����, �� ����� �� ������������. ��������, �� ��� �������� ������!<br>
1 ����� = 5 ��������, ����� ��������� ���� �� �������� ���� (��� �������� � ������ ��� ������).</div>
        <div class="cyber-grid">

      <!-- Card 1 -->
      <div class="cyber-card gift-card">
        <div class="cyber-image-wrapper">
          <img src="https://upforme.ru/uploads/001c/98/42/2/122949.webp" alt="Nibbles-1">
        </div>
        <div class="cyber-card-title">��������� ������ “����� � �����”</div>
      </div>

      <!-- Card 2 -->
      <div class="cyber-card gift-card">
        <div class="cyber-image-wrapper">
          <img src="https://upforme.ru/uploads/001c/98/42/2/889641.webp" alt="Nibbles-2">
        </div>
        <div class="cyber-card-title">Purrr the fuck up, Samurai</div>
      </div>

      <!-- Card 3 -->
      <div class="cyber-card gift-card">
        <div class="cyber-image-wrapper">
          <img src="https://upforme.ru/uploads/001c/98/42/2/534598.webp" alt="Nibbles-3">
        </div>
        <div class="cyber-card-title">Fashion is my passion</div>
      </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">��������� ��� �����<i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
                  <div class="cyber-description">������ ��� ���� ������ �������� �����, �� ����� �� ������������. ��������, ��� ���� � ��� �������� ���!<br>
1 ����� = 5 ��������, ����� ��������� ���� �� �������� ���� (��� �������� � ������ ��� ������).</div>
        <div class="cyber-grid">
           
            <!-- Card 1 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp" alt="champaradise">
               </div>
               <div class="cyber-card-title">�����������</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������ ����� ����������.</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/191350.webp" alt="�entzon-�otochtin">
               </div>
               <div class="cyber-card-title">������ ��������</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������, ������� ��� ������.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/857309.webp" alt="ab-synth">
               </div>
               <div class="cyber-card-title">��-����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">���� �������.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/846521.webp" alt="sake-utagawa">
               </div>
               <div class="cyber-card-title">���� �������</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��������� ������� ����.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/149402.webp" alt="romvlvs-gin">
               </div>
               <div class="cyber-card-title">������� ����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������ ������ ��������.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760926.webp" alt="paul-night">
               </div>
               <div class="cyber-card-title">��� ����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������� ������� ���������� � ����������.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/875284.webp" alt="chateau-delen-2012">
               </div>
               <div class="cyber-card-title">���� ����� 2012</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� 200 �������. �������� �����.</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/368756.webp" alt="calavera-feliz">
               </div>
               <div class="cyber-card-title">�������� �����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������? ��������.</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/988568.webp" alt="baalbek-arak">
               </div>
               <div class="cyber-card-title">�������� ����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ���������� ��� ���������� ������ � �������.</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/716470.webp" alt="armagnac-massy">
               </div>
               <div class="cyber-card-title">�������� �����</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ��� - ����������� ��.</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">������� �� ���� <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-description">�� ������ ��������� � ��� ���, ��� ������. ���� ������ ������! ��... �� �� �� ���������� ��� ��� ����������� � ��������?</div>
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/882397.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">1: Aneboda</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����������. ����������������. ��������.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/192237.webp" alt="gift-wrap-2">
               </div>
               <div class="cyber-card-title">2: Bergsbo</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��� ��������� ��������, �������������� ������������.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/799466.webp" alt="gift-wrap-3">
               </div>
               <div class="cyber-card-title">3: Dave</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� ��������� - ���� ���.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/718754.webp" alt="gift-wrap-4">
               </div>
               <div class="cyber-card-title">4: Elsfjord</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� � ���������� - ������������� ���� �����.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760043.webp" alt="gift-wrap-5">
               </div>
               <div class="cyber-card-title">5: Cirkel</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��, ����� ����, �� ����� ���������� ��������, ���� �� ����!</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/977520.webp" alt="gift-wrap-6">
               </div>
               <div class="cyber-card-title">6: Capita</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">������ �� �������� ��� ������������� �����, ����������� ��������</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/764287.webp" alt="gift-wrap-7">
               </div>
               <div class="cyber-card-title">7: Pinje</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">�� ������. ��� �� ��. ��� �� �����.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/788704.webp" alt="gift-wrap-8">
               </div>
               <div class="cyber-card-title">8: Bomull</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��� ��������� �������, ����, ��������� � ������� �����.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/596202.webp" alt="gift-wrap-9">
               </div>
               <div class="cyber-card-title">9: Skrin</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��������, �� ������.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/290411.webp" alt="gift-wrap-10">
               </div>
               <div class="cyber-card-title">10: Bladet</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� ���� 12 ����, � �� ������� �� �������� ��� �������� ������.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/178922.webp" alt="gift-wrap-11">
               </div>
               <div class="cyber-card-title">11: MLTH Attityd</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">� ��� ����� �������??</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/612284.webp" alt="gift-wrap-12">
               </div>
               <div class="cyber-card-title">12: Behandla</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">����� ������ �� ����� ��������</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Gifts Section -->
    <div class="cyber-section">
      <div class="cyber-button">������ <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
         <div class="cyber-description">������� �������? ������ ����� � ������� ��������. ��, ��� ��� ���������.<br>
�� �������� ����� ������� � �������� ��� ������� �������, ����� ������������ � ���� �� � ��� ��������� ������ ��������. ������ ����� ������� �������� ��� � ������ ����.<br></div>
        <div class="cyber-grid cyber-gift-wrap">
           
                  <!-- Card 1 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/331657.png" alt="gift-wrap-1">
                     </div>
                     <div class="cyber-card-title">1: Thread of Thoughts</div>
                  </div>

                  <!-- Card 2 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/928253.png" alt="gift-wrap-2">
                     </div>
                     <div class="cyber-card-title">2: Mushroom is strong</div>
                  </div>

                  <!-- Card 3 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/277088.png" alt="gift-wrap-3">
                     </div>
                     <div class="cyber-card-title">3: I drew you a heart</div>
                  </div>

                  <!-- Card 4 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/231943.png" alt="gift-wrap-4">
                     </div>
                     <div class="cyber-card-title">4: Chooombatta!</div>
                  </div>

                  <!-- Card 5 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/725147.png" alt="gift-wrap-5">
                     </div>
                     <div class="cyber-card-title">5: Paper Spines</div>
                  </div>

                  <!-- Card 6 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/238980.png" alt="gift-wrap-6">
                     </div>
                     <div class="cyber-card-title">6: Africa Loco</div>
                  </div>

                  <!-- Card 7 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/10243.png" alt="gift-wrap-7">
                     </div>
                     <div class="cyber-card-title">7: I See Squares</div>
                  </div>

                  <!-- Card 8 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/906973.png" alt="gift-wrap-8">
                     </div>
                     <div class="cyber-card-title">8: Local Flavor</div>
                  </div>

                  <!-- Card 9 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/674472.png" alt="gift-wrap-9">
                     </div>
                     <div class="cyber-card-title">9: Trauma Postcard</div>
                  </div>

                  <!-- Card 10 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/203248.png" alt="gift-wrap-10">
                     </div>
                     <div class="cyber-card-title">10: Cyberspace Ocean</div>
                  </div>

                  <!-- Card 11 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/893306.png" alt="gift-wrap-11">
                     </div>
                     <div class="cyber-card-title">11: Nomad in Space</div>
                  </div>

                  <!-- Card 12 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/286136.png" alt="gift-wrap-12">
                     </div>
                     <div class="cyber-card-title">12: Night City Noir</div>
                  </div>

                  <!-- Card 13 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/614346.png" alt="gift-wrap-13">
                     </div>
                     <div class="cyber-card-title">13: It Will Work</div>
                  </div>

                  <!-- Card 14 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/374523.png" alt="gift-wrap-14">
                     </div>
                     <div class="cyber-card-title">14: Usual Monday</div>
                  </div>

                  <!-- Card 15 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/920551.png" alt="gift-wrap-15">
                     </div>
                     <div class="cyber-card-title">15: Wanna Be Pretty</div>
                  </div>

                  <!-- Card 16 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/142570.png" alt="gift-wrap-16">
                     </div>
                     <div class="cyber-card-title">16: One Shot Too Many</div>
                  </div>

                  <!-- Card 17 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/935133.png" alt="gift-wrap-17">
                     </div>
                     <div class="cyber-card-title">17: Migraine</div>
                  </div>

                  <!-- Card 18 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/226506.png" alt="gift-wrap-18">
                     </div>
                     <div class="cyber-card-title">18: Other’s Headache</div>
                  </div>

                  <!-- Card 19 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/46864.png" alt="gift-wrap-19">
                     </div>
                     <div class="cyber-card-title">19: Poke Your Noodles</div>
                  </div>

                  <!-- Card 20 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/501053.png" alt="gift-wrap-20">
                     </div>
                     <div class="cyber-card-title">20: I See Colours</div>
                  </div>

                  <!-- Card 21 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/742988.png" alt="gift-wrap-21">
                     </div>
                     <div class="cyber-card-title">21: Conspiracy Theory</div>
                  </div>

                  <!-- Card 22 -->
                  <div class="cyber-card gift-card">
<div class="price-tag price-iconic">15❄️</div>
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/751637.jpg" alt="gift-wrap-21">
                     </div>
                     <div class="cyber-card-title">22: Custom Service</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">��������� ������ �� ������ ������.</div>
                  </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* ================================================
   [1] Global Variables
=============================================== */
.cyberpunk-display {
  --bg-card: rgba(19, 19, 22, 0.9); /* Dark background for cards */
  --bg-hover: rgba(32, 32, 45, 0.9); /* Subtle hover background */
   
  --color-text: #f5f5f5;
  --color-text-dim: rgba(255, 255, 255, 0.8);
   
  --accent-yellow: #F2E600; /* Cyberpunk yellow */
  --accent-magenta: #FF06B5; /* Magenta */
  --accent-cyan: #55E9EB; /* Turq */
  --accent-border: rgba(255, 248, 31, 0.5); /* Faint yellow border */
   
  --color-dark: #131316;
  --color-bglight: #20202D;
  --color-bglighter: #363642;
   
/* --- Rarity Colors --- */
  --price-common: #f9f9f9;
  --price-uncommon: #00806f;
  --price-rare: #174fa3;
  --price-epic: #7d0fae;
  --price-legendary: var(--accent-yellow);

/* --- Typography --- */
  --font-stack: 'Orbitron', 'Raleway', 'Roboto', monospace;
   
/* --- Spacing & Layout --- */
  --space-xs: 0.25rem;  /* ~4px */
  --space-sm: 0.5rem;   /* ~8px */
  --space-md: 1rem;     /* ~16px */
  --space-lg: 1.5rem;   /* ~24px */
   
/* --- Effects --- */
  --cp-clip: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
  --transition-fast: 0.2s ease;
  --transition-std: 0.3s ease;
}

/* ================================================
   [2] Reset and Base
=============================================== */
.cyberpunk-display * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cyberpunk-display {
  font-family: var(--font-stack);
  color: var(--color-text);
  line-height: 1.1;
}

/* ================================================
   [3] Layout & Container
=============================================== */
.cyberpunk-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cyber-section {
  margin-bottom: var(--space-xs);
}

/* ================================================
   [4] Typography & Titles
=============================================== */
.cyber-title {
font-size: 1.125rem; /* 18px */
  color: var(--accent-magenta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--accent-magenta);
  padding-bottom: var(--space-xs);
}

/* ================================================
   [5] Grid
=============================================== */
.cyber-grid {
  display: grid;
  /* �������������� ����������: �������� �� ������ 120px, �� ������������� ���� ���� ����� */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-xs);
}

/* ================================================
   [6] Components: Card
=============================================== */
.cyber-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-std), background var(--transition-std);
  padding: 1px;
  clip-path: var(--cp-clip);
}

.cyber-card:hover {
  transform: translateY(-3px);
  background: var(--bg-hover);
  z-index: 5;
}

/* ������ */
.price-tag {
  position: absolute; 
  top: 5px;
  left: 5px; 
  color: var(--color-dark);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  clip-path: var(--cp-clip);
  z-index: 10;
  transition: opacity var(--transition-std), transform var(--transition-std);
}

.cyber-card:hover .price-tag {
  opacity: 0;
  transform: translateY(-10px);
}

/* Price Categories */
.price-cheap {
  background-color: #f9f9f9; /* ����� ��� ������� ������� */
}
.price-reg {
  background-color: #00806f; /* ������� ��� ��������� ������� */
}
.price-med {
  background-color: #174fa3; /* ��� ��� ������� ������� */
}
.price-rare {
  background-color: #7d0fae; /* ������ ��� ������ */
}
.price-iconic {
  background-color: var(--accent-yellow); /* ������ ��� ������ */
}

/* --- Card Content --- */

.cyber-card-title {
  font-size: 0.65rem;
  color: var(--accent-yellow);
  background: var(--color-dark);
  padding: var(--space-xs);
  width: 100%;
   flex-grow: 0;
   margin-top: auto;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* �����������, ��� ����� �� ����� ������� ������ */
  flex-shrink: 0; 
  z-index: 15; /* ����� ��� ������ ��������, ���� ����� ��� */
}

.cyber-card:hover .cyber-card-title {
  color: var(--accent-magenta);
}

.cyber-card-description {
  position: absolute; 
  left: 0;
  width: 100%;
  bottom: 35px; /* ������������� ����� ��� ������� */
   
  background: rgba(19, 19, 22, 0.95);
  padding: 10px;
   
  opacity: 0;
  transform: translateY(10px); /* ������ ����� ����� */
  transition: all 0.3s ease;

  z-index: 10; /* ����� ����� ��������� ������ */
  pointer-events: auto;
  user-select: text;
  cursor: text;

  font-size: 0.65rem;
  color: #ccc;
  text-align: center;
}

/* 1. ����������, ���� ������ �� ����� */
.cyber-card-title:hover ~ .cyber-card-description,
/* 2. ����������, ���� ������ �� ��������� (�����������) */
.cyber-expand-indicator:hover ~ .cyber-card-description,
/* 3. ��������� �������, ���� ������ �� ���� �������� */
.cyber-card-description:hover {
  opacity: 1;
  transform: translateY(0);
}

/* ���� ��������� ������ �� ��� ����� */
::selection {
  background: var(--accent-magenta); /* ���� ������� ���� */
  color: #fff;
  text-shadow: none;
}

/* Expand indicator */
.cyber-expand-indicator {
  width: 0; 
  height: 0;
  margin: 3px auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-yellow);
  transition: transform var(--transition-std);
}

.cyber-card:hover .cyber-expand-indicator {
  transform: rotate(180deg);
}

/* ================================================
   [7] Components: Images
=============================================== */

.cyber-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 1;      /* ������������ �� �� ��������� ������������ */
  min-height: 0; /* ����� �������� �� ����������� ������� �������� */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0; /* ������� ������ �����, ����� ������� ������ */
}

.cyber-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  padding: 2px;
  transition: transform var(--transition-std);
  will-change: transform;
}

.cyber-image-wrapper:hover img {
  transform: scale(1.1);
  filter: saturate(150%) brightness(110%);
}

.cyber-gift-wrap .cyber-image-wrapper img {
  object-fit: cover;
}

/* ================================================
   ����������� �������������
=============================================== */

.cyber-section {
   margin-bottom: 0px; /* ���������� ����� �������� */
}

.cyber-button {
  width: 100%;
  cursor: pointer;
  background: var(--color-bglight);
  color: var(--accent-yellow);
  font-size: 0.875rem; /* 14px */
  text-transform: uppercase;
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
}

.cyber-button:hover {
  background: var(--color-bglighter);
  color: var(--accent-magenta);
  border-left-color: 2px var(--accent-magenta);
}

.cyber-button.i_active {
  background: var(--color-bglight);
  color: var(--accent-cyan);
  border-bottom: 1px solid var(--accent-cyan);
}

/* ��������� ��������� */
.cyber-button .select-mark {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-yellow);
  transition: transform var(--transition-std);
}

.cyber-button.i_active .select-mark {
  transform: rotate(-180deg); 
}

/* ����� ��� ������� */
.cyber-description {
  font-size: 0.625rem; /* 10px */
  color: var(--color-text-dim);
  text-align: right;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--color-dark);
}

.cyber-content-wrap {
  display: none;
  background: var(--color-bglighter);
  padding: var(--space-sm);
}

.cyber-content-wrap.active {
    display: block; /* ����� ��� JS ������������ */
}

/* ================================================
   [9] Responsive Styles
=============================================== */
@media (max-width: 768px) {
  .cyber-grid {
    /* �� ��������� ��������� ����������� ������ �������� */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-xs);
  }

.cyber-card-title {
  font-size: 0.55rem;
}
  
  .price-tag {
    font-size: 0.5rem;
    padding: 2px 4px;
  }
}
</style>

<script>
  document.querySelectorAll('.cyber-button').forEach(button => {
    button.addEventListener('click', () => {
      const content = button.nextElementSibling;

      // ����������� ��� �������� ������
      document.querySelectorAll('.cyber-content-wrap').forEach(otherContent => {
        if (otherContent !== content) {
          otherContent.style.display = 'none';
          otherContent.previousElementSibling.classList.remove('i_active');
        }
      });

      // ����������� ������� ������
      if (content.style.display === 'block') {
        content.style.display = 'none';
        button.classList.remove('i_active');
      } else {
        content.style.display = 'block';
        button.classList.add('i_active');
      }
    });
  });
</script>

[hideprofile]

��

��:

1. [b]1. ���:[/b] 
������/������ �������� (�������) ��� �������� �����. 

�������� �������:
1 - �������
2 - �����

�������� �������:
������ �� ���� (����)
�������:
�������: 
������������ (��� �������� ���)

���� �������� ��������� ������ - ���������� ������ ������ �� �����������, ������� 500�500 ��������.
[b]2. �����:[/b]
����������:
������������ ���������� �������� + ��� ������������ �������� = �������� �����
���������:
������������ ���������� �������� - ��������� ������� = �������� �����
[b]3. �����:[/b]
����� �������� ����� ��� ���������, ���� �����

[hideprofile]

��

mybb@mybb.ru (root) — Fri, 12 Dec 2025 00:42:50 +0300

��

mybb@mybb.ru (root) — Tue, 09 Dec 2025 23:15:55 +0300

��

mybb@mybb.ru (root) — Sun, 23 Nov 2025 01:28:16 +0300

Achievements

mybb@mybb.ru (root) — Sat, 22 Nov 2025 21:26:32 +0300

WELCOME TO NIGHT CITY - ��

OLD BUT GOLD - �� .

NEWBIE - ��

Halloween 2025 - �� - �� !

Halloween 2025 - COMPLETIONIST - �� 110%

datasprawl

������ 2

���� ������ ���������

����� ������� ������

������ -- ���� ����

�����������

�������� ��� ������ - ��������

������

������

������������ �������

�����

Achievements

�� 2

��

��

�� -- ��

��

�� - ��

��

��

��

��