[html]<!-- гостевая стрен (игровой тест) | legume -->
<div class="sgb-wrap" id="sgbWrap">

  <div class="sgb-hero">
    <div class="sgb-hero-img" id="sgbHeroImg"></div>
    <div class="sgb-hero-veil"></div>
    <div class="sgb-hero-grain"></div>
    <div class="sgb-hero-cap">
      <div class="sgb-kicker">breckenridge · colorado · 2026</div>
      <div class="sgb-title">гостевая</div>
    </div>
    <nav class="sgb-links">
      <a href="/viewtopic.php?id=1">faq</a>
      <a href="/viewtopic.php?id=2">сюжет</a>
      <a href="/viewtopic.php?id=3">нужные</a>
      <a href="/viewtopic.php?id=4">правила</a>
    </nav>
  </div>

  <div class="sgb-chips">
    <div class="sgb-chip"><span>гостям</span>держим сутки</div>
    <div class="sgb-chip"><span>игрокам</span>держим 3 дня</div>
    <div class="sgb-chip"><span>продление</span>ещё раз на 3 дня</div>
    <div class="sgb-chip sgb-chip-acc"><span>статус</span>игровой тест</div>
  </div>

  <div class="sgb-grid">

    <section class="sgb-col sgb-info">
      <div class="sgb-h">о проекте</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero, sed cursus ante dapibus diam. Sed nisi nulla quis sem at nibh elementum imperdiet.</p>
      <p>Duis sagittis ipsum, praesent mauris fusce nec tellus sed augue semper porta. Mauris massa vestibulum lacinia arcu eget nulla.</p>
      <ul class="sgb-rules">
        <li>Lorem ipsum dolor sit amet, все даты включительно.</li>
        <li>Consectetur adipiscing elit, дубль — с разрешения игрока.</li>
        <li>Sed cursus ante dapibus diam, ники лапслоком.</li>
      </ul>

      <div class="sgb-h sgb-h-sp">нужные</div>
      <div class="sgb-wanted">
        <a class="sgb-w" href="/viewtopic.php?id=5">
          <i style="background-image:url('https://upforme.ru/uploads/001c/c6/af/2/363651.png');background-position:20% 30%;"></i>
          <b>lorem ipsum</b><em>старший брат</em>
        </a>
        <a class="sgb-w" href="/viewtopic.php?id=6">
          <i style="background-image:url('https://upforme.ru/uploads/001c/c6/af/2/363651.png');background-position:40% 25%;"></i>
          <b>dolor amet</b><em>пропавшая</em>
        </a>
        <a class="sgb-w" href="/viewtopic.php?id=7">
          <i style="background-image:url('https://upforme.ru/uploads/001c/c6/af/2/363651.png');background-position:90% 25%;"></i>
          <b>sit consectetur</b><em>шериф</em>
        </a>
        <a class="sgb-w" href="/viewtopic.php?id=8">
          <i style="background-image:url('https://upforme.ru/uploads/001c/c6/af/2/363651.png');background-position:65% 40%;"></i>
          <b>elit integer</b><em>свидетель</em>
        </a>
      </div>
    </section>

    <section class="sgb-col">
      <div class="sgb-h"><span class="sgb-sex">♂</span> мужские <s class="sgb-cnt"></s></div>
      <div class="sgb-list">
        <div class="sgb-grp" data-until="03.10">
          <div class="sgb-date">до 03.10</div>
          <div class="sgb-it">lorem ipsum — за <a href="#">dolor sit</a></div>
        </div>
        <div class="sgb-grp" data-until="05.10">
          <div class="sgb-date">до 05.10</div>
          <div class="sgb-it">consectetur adipiscing — за <a href="#">amet elit</a></div>
          <div class="sgb-it">sed cursus — за <a href="#">ante dapibus</a></div>
        </div>
        <div class="sgb-grp" data-until="09.10">
          <div class="sgb-date">до 09.10</div>
          <div class="sgb-it">praesent libero — за <a href="#">nisi nulla</a></div>
        </div>
        <div class="sgb-grp" data-until="14.10">
          <div class="sgb-date">до 14.10</div>
          <div class="sgb-it">mauris massa — за <a href="#">vestibulum</a></div>
          <div class="sgb-it">lacinia arcu — за <a href="#">eget nulla</a></div>
        </div>
        <div class="sgb-grp">
          <div class="sgb-date">бессрочно</div>
          <div class="sgb-it">duis sagittis — за <a href="#">амс</a></div>
        </div>
      </div>
    </section>

    <section class="sgb-col">
      <div class="sgb-h"><span class="sgb-sex">♀</span> женские <s class="sgb-cnt"></s></div>
      <div class="sgb-list">
        <div class="sgb-grp" data-until="01.10">
          <div class="sgb-date">до 01.10</div>
          <div class="sgb-it">integer nec — за <a href="#">odio praesent</a></div>
        </div>
        <div class="sgb-grp" data-until="04.10">
          <div class="sgb-date">до 04.10</div>
          <div class="sgb-it">semper porta — за <a href="#">fusce nec</a></div>
        </div>
        <div class="sgb-grp" data-until="07.10">
          <div class="sgb-date">до 07.10</div>
          <div class="sgb-it">tellus augue — за <a href="#">sem at nibh</a></div>
          <div class="sgb-it">elementum — за <a href="#">imperdiet</a></div>
        </div>
        <div class="sgb-grp" data-until="12.10">
          <div class="sgb-date">до 12.10</div>
          <div class="sgb-it">curabitur sodales — за <a href="#">ligula</a></div>
        </div>
        <div class="sgb-grp">
          <div class="sgb-date">бессрочно</div>
          <div class="sgb-it">aenean quam — за <a href="#">амс</a></div>
        </div>
      </div>
    </section>

  </div>

  <div class="sgb-copy">
    <span class="sgb-copy-l">придержать</span>
    <input type="text" id="sgbFace" placeholder="внешность">
    <input type="text" id="sgbNick" placeholder="ник">
    <input type="text" id="sgbLink" placeholder="ссылка на профиль">
    <button type="button" id="sgbCopyBtn">копировать</button>
    <button type="button" id="sgbReplyBtn">в форму ответа</button>
  </div>

</div>

<style>
@font-face{
    font-family:'The Silver Editorial';
    src:url('https://notafiles.ru/fonts/TheSilverEditorial-Regular.ttf') format('truetype');
    font-weight:400; font-style:normal; font-display:swap;
}

.sgb-wrap{
    --sgb-ink:#0d1314;
    --sgb-panel:rgb(var(--catbody, 255 255 255));
    --sgb-pun:rgb(var(--pun, 225 226 226));
    --sgb-txt:rgb(var(--text, 30 30 32));
    --sgb-dim:rgba(var(--text, 30 30 32), .55);
    --sgb-line:rgba(var(--text, 30 30 32), .1);
    --sgb-acc:rgb(var(--link, 56 108 110));
    --sgb-acc-dk:rgb(var(--acc2, 23 46 47));
    --sgb-warm:rgb(var(--acc4, 142 127 122));
    --sgb-on:#fff;
    --sgb-r:var(--glass-radius-sm, 10px);
    --sgb-serif:var(--font2, 'The Silver Editorial', 'Cormorant Garamond', serif);
    --sgb-mono:var(--font4, 'Roboto Mono', 'Courier New', monospace);
    --sgb-sans:var(--font3, 'Open Sans', Verdana, sans-serif);

    max-width:880px;
    margin:0 auto;
    font:400 10.5px/1.45 var(--sgb-sans);
    color:var(--sgb-txt);
    text-align:left;
}
.sgb-wrap *{ box-sizing:border-box; }

/* hero */
.sgb-hero{
    position:relative;
    aspect-ratio:880 / 350;
    border-radius:var(--sgb-r) var(--sgb-r) 0 0;
    overflow:hidden;
    background:var(--sgb-ink);
}
.sgb-hero-img{
    position:absolute; inset:-12px 0;
    background:url('https://upforme.ru/uploads/001c/c6/af/2/363651.png') center / cover no-repeat;
    filter:contrast(1.08) brightness(.9);
    animation:sgbZoom 26s ease-in-out infinite alternate;
    will-change:transform;
}
@keyframes sgbZoom{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.sgb-hero-veil{
    position:absolute; inset:0;
    background:
        linear-gradient(0deg, rgba(13,19,20,.92) 0%, rgba(13,19,20,.35) 34%, transparent 60%),
        radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(13,19,20,.55) 100%);
}
.sgb-hero-grain{
    position:absolute; inset:-20px;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:3px 3px;
    mix-blend-mode:overlay;
    animation:sgbGrain .7s steps(5) infinite;
    pointer-events:none;
}
@keyframes sgbGrain{
    0%{ transform:translate(0,0); } 20%{ transform:translate(-2px,1px); }
    40%{ transform:translate(1px,-2px); } 60%{ transform:translate(-1px,-1px); }
    80%{ transform:translate(2px,1px); } 100%{ transform:translate(0,0); }
}
.sgb-hero-cap{
    position:absolute;
    left:0; right:0; bottom:46px;
    z-index:3;
    text-align:center;
    color:#eef2f1;
    opacity:0;
    animation:sgbIn 1.2s .2s ease forwards;
}
@keyframes sgbIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.sgb-kicker{
    font:400 8.5px var(--sgb-mono);
    letter-spacing:.32em;
    text-transform:uppercase;
    opacity:.6;
}
.sgb-title{
    font:400 34px/1 var(--sgb-serif);
    letter-spacing:.04em;
    text-transform:lowercase;
    text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.sgb-links{
    position:absolute;
    left:0; right:0; bottom:14px;
    z-index:3;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
}
.sgb-links a{
    padding:3px 13px;
    border-radius:20px;
    font:400 9.5px var(--sgb-mono);
    text-transform:lowercase;
    letter-spacing:.06em;
    color:rgba(238,242,241,.85) !important;
    text-decoration:none !important;
    background:rgba(13,19,20,.45);
    box-shadow:0 0 0 1px rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    transition:background .25s ease, color .25s ease;
}
.sgb-links a:hover{ background:var(--sgb-acc); color:#fff !important; }

/* chips */
.sgb-chips{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    background:var(--sgb-line);
    border:1px solid var(--sgb-line);
    border-top:none;
}
.sgb-chip{
    flex:1 1 0;
    min-width:120px;
    padding:8px 10px;
    text-align:center;
    font:400 9.5px/1.3 var(--sgb-mono);
    background:var(--sgb-panel);
}
.sgb-chip span{
    display:block;
    margin-bottom:2px;
    font-size:7.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--sgb-warm);
}
.sgb-chip-acc{
    position:relative;
    overflow:hidden;
    background:var(--sgb-acc-dk);
    color:var(--sgb-on);
}
.sgb-chip-acc span{ color:rgba(255,255,255,.6); }
.sgb-chip-acc::before{
    content:"";
    position:absolute; left:-40%; bottom:0;
    width:40%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    animation:sgbSweep 3.2s linear infinite;
}
@keyframes sgbSweep{ to{ left:100%; } }
.sgb-chip-acc::after{
    content:"";
    position:absolute; top:7px; right:8px;
    width:5px; height:5px; border-radius:50%;
    background:#fff;
    box-shadow:0 0 6px 1px rgba(255,255,255,.7);
    animation:sgbPulse 2s ease-in-out infinite;
}
@keyframes sgbPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* grid */
.sgb-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    gap:1px;
    background:var(--sgb-line);
    border:1px solid var(--sgb-line);
    border-top:none;
}
.sgb-col{
    min-width:0;
    padding:14px 14px 12px;
    background:var(--sgb-panel);
}
.sgb-h{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid var(--sgb-line);
    font:400 15px/1 var(--sgb-serif);
    text-transform:lowercase;
    color:var(--sgb-acc-dk);
}
.sgb-h-sp{ margin-top:14px; }
.sgb-sex{ font-family:var(--sgb-sans); font-size:11px; color:var(--sgb-acc); }
.sgb-cnt{
    margin-left:auto;
    white-space:nowrap;
    text-decoration:none;
    font:400 8.5px var(--sgb-mono);
    letter-spacing:.06em;
    color:var(--sgb-dim);
}

.sgb-info p{ margin:0 0 6px; text-align:justify; }
.sgb-rules{ list-style:none; margin:8px 0 0; padding:0; }
.sgb-rules li{
    position:relative;
    margin:0 0 3px;
    padding-left:12px;
    color:var(--sgb-dim);
}
.sgb-rules li::before{
    content:"";
    position:absolute; left:2px; top:.6em;
    width:4px; height:4px;
    border-radius:50%;
    background:var(--sgb-acc);
}

/* wanted */
.sgb-wanted{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:6px;
}
.sgb-w{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 2px 7px;
    border-radius:8px;
    text-align:center;
    text-decoration:none !important;
    color:var(--sgb-txt) !important;
    background:rgba(var(--text, 30 30 32), .03);
    transition:transform .25s ease, background .25s ease;
}
.sgb-w:hover{ transform:translateY(-2px); background:rgba(var(--link, 56 108 110), .1); }
.sgb-w i{
    display:block;
    width:42px; height:42px;
    margin-bottom:3px;
    border-radius:50%;
    background-size:260% auto;
    background-repeat:no-repeat;
    box-shadow:0 0 0 2px var(--sgb-panel), 0 0 0 3px var(--sgb-acc);
    filter:grayscale(.35);
    transition:filter .25s ease;
}
.sgb-w:hover i{ filter:none; }
.sgb-w b{ font:600 9px/1.2 var(--sgb-sans); text-transform:lowercase; }
.sgb-w em{ font:italic 400 8.5px/1.2 var(--sgb-sans); color:var(--sgb-dim); }

/* holds */
.sgb-list{
    max-height:236px;
    overflow-y:auto;
    padding-right:6px;
    scrollbar-width:thin;
}
.sgb-grp{ margin-bottom:8px; transition:opacity .3s ease; }
.sgb-date{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-bottom:3px;
    padding:1px 8px;
    border-radius:20px;
    font:400 8.5px/1.6 var(--sgb-mono);
    letter-spacing:.04em;
    color:var(--sgb-on);
    background:var(--sgb-warm);
}
.sgb-it{ padding:1px 0 1px 2px; }
.sgb-it a{ color:var(--sgb-acc) !important; }

.sgb-grp.is-hot .sgb-date{ background:var(--sgb-acc-dk); }
.sgb-grp.is-hot .sgb-date::after{
    content:"";
    width:4px; height:4px; border-radius:50%;
    background:#fff;
    animation:sgbPulse 1.6s ease-in-out infinite;
}
.sgb-grp.is-gone{ opacity:.38; }
.sgb-grp.is-gone .sgb-it{ text-decoration:line-through; }

/* copy bar */
.sgb-copy{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border:1px solid var(--sgb-line);
    border-top:none;
    border-radius:0 0 var(--sgb-r) var(--sgb-r);
    background:var(--sgb-pun);
}
.sgb-copy-l{
    font:400 13px/1 var(--sgb-serif);
    text-transform:lowercase;
    color:var(--sgb-acc-dk);
    white-space:nowrap;
}
.sgb-copy input{
    flex:1 1 0;
    min-width:0;
    height:auto;
    margin:0;
    padding:4px 10px;
    border:1px solid var(--sgb-line);
    border-radius:20px;
    font:400 9.5px var(--sgb-mono);
    color:var(--sgb-txt);
    background:var(--sgb-panel);
    outline:none;
    transition:border-color .25s ease;
}
.sgb-copy input:focus{ border-color:var(--sgb-acc); }
.sgb-copy input.is-err{ border-color:#a0504a; }
.sgb-copy #sgbLink{ flex-grow:1.6; }
.sgb-copy button{
    padding:4px 14px;
    border:none;
    border-radius:20px;
    font:700 8.5px var(--sgb-sans);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--sgb-on);
    background:var(--sgb-acc-dk);
    cursor:pointer;
    transition:background .25s ease;
}
.sgb-copy button{ white-space:nowrap; }
.sgb-copy button:hover,
.sgb-copy button.is-done{ background:var(--sgb-acc); }

@media (max-width:640px){
    .sgb-copy{ flex-wrap:wrap; }
    .sgb-copy input{ flex:1 1 100%; }
}

@media (max-width:640px){
    .sgb-grid{ grid-template-columns:1fr; }
    .sgb-chip{ flex:1 1 45%; }
    .sgb-title{ font-size:24px; }
    .sgb-hero-cap{ bottom:40px; }
}
@media (prefers-reduced-motion:reduce){
    .sgb-hero-img, .sgb-hero-grain, .sgb-chip-acc::before, .sgb-chip-acc::after,
    .sgb-grp.is-hot .sgb-date::after{ animation:none; }
}
</style>

<script>
(function(){
    var root = document.getElementById('sgbWrap');
    if(!root || root.getAttribute('data-sgb-init')) return;
    root.setAttribute('data-sgb-init','1');

    var now = new Date();
    var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    var DAY = 864e5;

    var cols = root.querySelectorAll('.sgb-col');
    for(var c = 0; c < cols.length; c++){
        var grps = cols[c].querySelectorAll('.sgb-grp');
        if(!grps.length) continue;
        var live = 0;
        for(var g = 0; g < grps.length; g++){
            var grp = grps[g];
            var n = grp.querySelectorAll('.sgb-it').length;
            var m = (grp.getAttribute('data-until') || '').match(/^(\d{1,2})\.(\d{1,2})$/);
            if(m){
                var d = new Date(today.getFullYear(), +m[2] - 1, +m[1]);
                if(d - today < -180 * DAY) d.setFullYear(d.getFullYear() + 1);
                if(d - today > 180 * DAY) d.setFullYear(d.getFullYear() - 1);
                var left = Math.round((d - today) / DAY);
                if(left < 0){ grp.classList.add('is-gone'); continue; }
                if(left <= 1) grp.classList.add('is-hot');
            }
            live += n;
        }
        var cnt = cols[c].querySelector('.sgb-cnt');
        if(cnt) cnt.textContent = 'держим: ' + live;
    }

    var face = document.getElementById('sgbFace');
    var nick = document.getElementById('sgbNick');
    var link = document.getElementById('sgbLink');
    var copyBtn = document.getElementById('sgbCopyBtn');
    var replyBtn = document.getElementById('sgbReplyBtn');

    var flash = function(btn, txt){
        var orig = btn.getAttribute('data-t') || btn.textContent;
        btn.setAttribute('data-t', orig);
        btn.textContent = txt;
        btn.classList.add('is-done');
        setTimeout(function(){ btn.textContent = orig; btn.classList.remove('is-done'); }, 1600);
    };

    var build = function(){
        var f = face.value.trim(), n = nick.value.trim(), l = link.value.trim();
        face.classList.toggle('is-err', !f);
        nick.classList.toggle('is-err', !n && !l);
        if(!f || (!n && !l)) return null;
        var who = l ? '' + (n || l) + '' : n;
        return f + ' — за ' + who;
    };

    var copyText = function(txt, ok){
        var legacy = function(){
            var ta = document.createElement('textarea');
            ta.value = txt;
            ta.style.cssText = 'position:fixed;left:-9999px;top:0';
            document.body.appendChild(ta);
            ta.select();
            try{ document.execCommand('copy'); ok(); }catch(e){}
            document.body.removeChild(ta);
        };
        if(navigator.clipboard && navigator.clipboard.writeText){
            navigator.clipboard.writeText(txt).then(ok, legacy);
        } else legacy();
    };

    var findReply = function(){
        var wins = [window];
        try{ if(window.parent && window.parent !== window) wins.push(window.parent); }catch(e){}
        for(var i = 0; i < wins.length; i++){
            try{
                var ta = wins[i].document.getElementById('main-reply')
                      || wins[i].document.querySelector('#post textarea, textarea[name="req_message"]');
                if(ta) return ta;
            }catch(e){}
        }
        return null;
    };

    if(copyBtn) copyBtn.addEventListener('click', function(){
        var txt = build();
        if(txt) copyText(txt, function(){ flash(copyBtn, 'готово'); });
    });

    if(replyBtn) replyBtn.addEventListener('click', function(){
        var txt = build();
        if(!txt) return;
        var ta = findReply();
        if(!ta){
            copyText(txt, function(){ flash(replyBtn, 'скопировано, вставь'); });
            return;
        }
        ta.value = ta.value ? ta.value.replace(/\s*$/, '') + '\n' + txt : txt;
        try{ ta.dispatchEvent(new Event('input', { bubbles:true })); }catch(e){}
        try{ ta.scrollIntoView({ behavior:'smooth', block:'center' }); }catch(e){ ta.scrollIntoView(); }
        ta.focus();
        flash(replyBtn, 'вставлено');
    });

    [face, nick, link].forEach(function(el){
        if(el) el.addEventListener('input', function(){ el.classList.remove('is-err'); });
    });

    var img = document.getElementById('sgbHeroImg');
    if(img){
        var ticking = false;
        window.addEventListener('scroll', function(){
            if(ticking) return;
            ticking = true;
            requestAnimationFrame(function(){
                var top = img.parentNode.getBoundingClientRect().top;
                img.style.backgroundPosition = 'center calc(50% + ' + (top * -0.07) + 'px)';
                ticking = false;
            });
        }, { passive:true });
    }
})();
</script>
[/html]