/* гостевая на bb-тегах | legume
   Теги и пример — в guestbook.txt рядом. Цвета — переменные форума,
   светлая/тёмная (.dark на <html>) переключаются сами.
   Поведение (фон шапки, аватарки нужных, счётчики, «горит/истекло»,
   панель «придержать») — guestbook.js в HTML-низ. */

@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;
}

.custom_tag_gb{
    --sgb-ink:#0d1314;
    --sgb-panel:color-mix(in srgb, rgb(var(--pun, 225, 226, 226)) 96%, rgb(10, 10, 10));
    --sgb-tan:#c4a487;            /* цвет надписи на шапке: рамки нужных */
    --sgb-chipbg:#a99886;         /* гостям / игрокам / продление */
    --sgb-chiptx:#2a2522;
    --sgb-teal:#1d6163;           /* статус, ссылки шапки */
    --sgb-datebg:#857670;         /* подложка даты придержания */
    --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-font5:var(--font5, 'Jost', sans-serif);
    --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;
}
.custom_tag_gb *{ box-sizing:border-box; }

/* служебные <p>/<br>, которые движок ставит между тегами */
.custom_tag_gb p{ margin:0 !important; padding:0 !important; text-align:inherit; line-height:inherit; }
.custom_tag_gbcol > p{ margin:0 0 6px !important; text-align:justify; }
.custom_tag_gb :is(.custom_tag_gb, .custom_tag_gbhero, .custom_tag_gbchips, .custom_tag_gbgrid,
    .custom_tag_gbcol, .custom_tag_gbwanted, .custom_tag_gbgrp, .custom_tag_gblinks) > br,
.custom_tag_gb > br,
.custom_tag_gb p:empty,
.custom_tag_gb p.sgb-junk{ display:none; }
.custom_tag_gbchips > p,
.custom_tag_gbgrid > p,
.custom_tag_gbwanted > p,
.custom_tag_gblinks > p{ display:contents; }

/* ---------- hero ---------- */
.custom_tag_gbhero{
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    align-content:flex-end;
    justify-content:space-between;
    gap:6px 16px;
    aspect-ratio:880 / 350;
    container-type:inline-size;
    padding:0 26px 11px 60px;
    border-radius:var(--sgb-r) var(--sgb-r) 0 0;
    overflow:hidden;
    background:var(--sgb-ink);
    text-align:center;
    color:#eef2f1;
}
.custom_tag_gbhero > *{ position:relative; z-index:3; }
.custom_tag_gbhero > .sgb-hero-img,
.custom_tag_gbhero > .sgb-hero-veil,
.custom_tag_gbhero > .sgb-hero-grain{ position:absolute; z-index:0; }
.sgb-hero-img{
    inset:0;
    background:center / cover no-repeat;
    filter:contrast(1.08) brightness(.9);
}
@keyframes sgbZoom{ from{ transform:scale(1); } to{ transform:scale(1.03); } }
.sgb-hero-veil{
    inset:0;
    background:
        linear-gradient(0deg, rgba(13,19,20,.82) 0%, rgba(13,19,20,.55) 11%, transparent 22%),
        radial-gradient(ellipse at 50% 45%, transparent 65%, rgba(13,19,20,.4) 100%);
}
.sgb-hero-grain{
    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); }
}
@keyframes sgbIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.custom_tag_gbkick{
    order:2;
    margin-left:auto;
    font:400 15px/1 var(--sgb-font5);
    letter-spacing:.02em;
    text-transform:lowercase;
    opacity:0;
    animation:sgbIn 1.2s .2s ease forwards;
}
.custom_tag_gbkick, .custom_tag_gbkick p{ color:rgba(238,242,241,.88); }
/* название поверх картинки — по желанию (на новой шапке надпись в самой картинке) */
.custom_tag_gbtitle{
    position:absolute !important;
    left:0; right:0; top:40%;
    font:400 34px/1 var(--sgb-serif);
    letter-spacing:.04em;
    text-transform:lowercase;
    text-shadow:0 2px 14px rgba(0,0,0,.6);
    opacity:0;
    animation:sgbIn 1.2s .2s ease forwards;
}
.custom_tag_gbtitle p{ font:inherit; color:#eef2f1; text-align:center !important; }
.custom_tag_gblinks{
    order:1;
    flex:1 1 auto;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px 10px;
    max-width:66%;
}
.custom_tag_gblinks a{
    min-width:0;
    padding:4px 28px;
    border-radius:20px;
    text-align:center;
    font:400 10px/1.3 var(--sgb-sans);
    text-transform:lowercase;
    color:#eef2f1 !important;
    text-decoration:none !important;
    background:var(--sgb-teal);
    box-shadow:0 2px 8px rgba(0,0,0,.35);
    transition:background .25s ease, transform .25s ease;
}
.custom_tag_gblinks a:hover{ background:var(--sgb-acc); transform:translateY(-1px); }

/* нужные — кружки прямо на шапке, 2×2 со сдвигом второго ряда */
.custom_tag_gbhero > .custom_tag_gbwanted{
    position:absolute !important;
    inset:0;
    display:block;
    pointer-events:none;
}
.custom_tag_gbhero .custom_tag_gbw{
    position:absolute;
    padding:0;
    background:none !important;
    transform:translate(-50%, -50%);
    pointer-events:auto;
}
.custom_tag_gbhero .custom_tag_gbw:hover{ transform:translate(-50%, calc(-50% - 2px)); z-index:6; }
/* места кружков под шапку 884037.png (центр, % от шапки) */
.custom_tag_gbhero .custom_tag_gbw:nth-of-type(1){ left:55%;   top:48.5%; }
.custom_tag_gbhero .custom_tag_gbw:nth-of-type(2){ left:64.6%; top:48.5%; }
.custom_tag_gbhero .custom_tag_gbw:nth-of-type(3){ left:52.6%; top:69.5%; }
.custom_tag_gbhero .custom_tag_gbw:nth-of-type(4){ left:62.2%; top:69.5%; }
.custom_tag_gbhero .custom_tag_gbw .sgb-ava{
    width:46px; height:46px; margin:0;
    width:clamp(26px, 5.3cqw, 50px); height:clamp(26px, 5.3cqw, 50px);
    box-shadow:0 0 0 3px var(--sgb-tan), 0 4px 14px rgba(0,0,0,.5);
    filter:sepia(.25) grayscale(.2);
}
/* подпись — всплывашкой при наведении */
.custom_tag_gbhero .custom_tag_gbw > p{
    position:absolute;
    left:50%; top:calc(100% + 6px);
    padding:5px 10px 6px !important;
    border-radius:8px;
    white-space:nowrap;
    color:#eef2f1;
    background:rgba(13,19,20,.72) !important;
    -webkit-backdrop-filter:blur(6px);
            backdrop-filter:blur(6px);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    transform:translate(-50%, -4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:4;
}
.custom_tag_gbhero .custom_tag_gbw:hover > p{ opacity:1; transform:translate(-50%, 0); }
.custom_tag_gbhero .custom_tag_gbw a{ color:#eef2f1 !important; }
.custom_tag_gbhero .custom_tag_gbrole{ color:rgba(238,242,241,.65); }

/* ---------- chips ---------- */
.custom_tag_gbchips{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    background:var(--sgb-line);
    border:1px solid var(--sgb-line);
    border-top:none;
}
.custom_tag_gbchip, .custom_tag_gbacc{
    flex:1 1 0;
    min-width:120px;
    padding:6px 10px 7px;
    text-align:center;
    font:700 9.5px/1.3 var(--sgb-mono);
    color:var(--sgb-chiptx);
    background:var(--sgb-chipbg);
}
.custom_tag_gbchip p, .custom_tag_gbacc p{ font:inherit; color:inherit; text-align:center !important; }
.custom_tag_gbchip::before, .custom_tag_gbacc::before{
    content:attr(data-k);
    display:block;
    margin-bottom:2px;
    font-size:7.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(42,37,34,.6);
}
.custom_tag_gbacc{
    position:relative;
    overflow:hidden;
    background:var(--sgb-teal);
    color:var(--sgb-on);
}
.custom_tag_gbacc::before{ color:rgba(255,255,255,.6); }
.custom_tag_gbacc .sgb-sweep{
    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%; } }
.custom_tag_gbacc::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 ---------- */
.custom_tag_gbgrid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    gap:1px;
    background:var(--sgb-line);
    border:1px solid var(--sgb-line);
    border-top:none;
}
.custom_tag_gbcol{
    min-width:0;
    padding:14px 14px 12px;
    background:var(--sgb-panel);
}
.custom_tag_gbh{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 8px;
    padding-bottom:6px;
    border-bottom:1px solid var(--sgb-line);
    font:400 15px/1 var(--sgb-serif);
    text-transform:lowercase;
    color:var(--sgb-txt);
}
.dark .custom_tag_gbh{ color:var(--sgb-txt); }
.custom_tag_gbh p{ font:inherit; color:inherit; margin:0 !important; }
.custom_tag_gbh[data-sex]:not([data-sex=""])::before{
    content:attr(data-sex);
    font-family:var(--sgb-sans); font-size:11px; color:var(--sgb-acc);
}
.custom_tag_gbcol * + .custom_tag_gbh{ margin-top:14px; }
.sgb-cnt{
    margin-left:auto;
    white-space:nowrap;
    font:700 8.5px var(--sgb-mono);
    letter-spacing:.06em;
    color:var(--sgb-txt);
}

.custom_tag_gbrule{
    position:relative;
    margin:0 0 4px;
    padding-left:12px;
    color:var(--sgb-txt);
}
.custom_tag_gbrule p{ color:inherit; }
.custom_tag_gbrule::before{
    content:"";
    position:absolute; left:2px; top:.6em;
    width:4px; height:4px;
    border-radius:50%;
    background:var(--sgb-acc);
}

/* ---------- администрация ---------- */
.custom_tag_gbsub{
    margin:26px 0 8px 2px;
    font:400 12px/1 var(--sgb-font5);
    letter-spacing:.06em;
    text-transform:lowercase;
    color:var(--sgb-txt);
}
.custom_tag_gbsub p{ font:inherit; color:inherit; }
.custom_tag_gbadm{
    display:grid;
    grid-template-columns:repeat(3, max-content);
    gap:8px 26px;
    padding-left:2px;
    font:400 10px/1.3 var(--sgb-mono);
}
.custom_tag_gbadm > p{ display:contents; }
.custom_tag_gbadm a, .custom_tag_gbadm .sgb-adm{ color:var(--sgb-txt) !important; text-decoration:none !important; }
.custom_tag_gbadm a::before, .custom_tag_gbadm .sgb-adm::before{ content:"* "; color:var(--sgb-dim); }
.custom_tag_gbadm a:hover{ color:var(--sgb-acc) !important; }

/* ---------- нужные ---------- */
.custom_tag_gbwanted{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:6px;
}
.custom_tag_gbw{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 2px 7px;
    border-radius:8px;
    text-align:center;
    background:rgba(var(--text, 30, 30, 32), .03);
    transition:transform .25s ease, background .25s ease;
}
.custom_tag_gbw:hover{ transform:translateY(-2px); background:rgba(var(--link, 56, 108, 110), .1); }
.custom_tag_gbw .sgb-ava{
    display:block;
    width:42px; height:42px;
    margin-bottom:3px;
    border-radius:50%;
    background-size:260% auto;
    background-repeat:no-repeat;
    background-position:center;
    box-shadow:0 0 0 2px var(--sgb-panel), 0 0 0 3px var(--sgb-acc);
    filter:grayscale(.35);
    transition:filter .25s ease;
}
.custom_tag_gbw:hover .sgb-ava{ filter:none; }
.custom_tag_gbw p{ font:600 9px/1.2 var(--sgb-sans); text-transform:lowercase; text-align:center !important; }
.custom_tag_gbw a{ color:var(--sgb-txt) !important; text-decoration:none !important; }
.custom_tag_gbw a::after{ content:""; position:absolute; inset:0; } /* вся карточка кликабельна */
.custom_tag_gbrole{
    display:block;
    font:italic 400 8.5px/1.2 var(--sgb-sans);
    text-transform:none;
    color:var(--sgb-dim);
}

/* ---------- придержания ---------- */
/* список тянется на всю высоту колонки (её задаёт самая длинная — «о проекте»),
   сам высоту ряда не раздувает: flex-basis 0 + min-height */
.custom_tag_gbcol:has(.custom_tag_gblist){
    display:flex;
    flex-direction:column;
}
.custom_tag_gblist{
    flex:1 1 0;
    min-height:180px;
    overflow-y:auto;
    padding-right:6px;
    scrollbar-width:thin;
}
.custom_tag_gbgrp{ margin-bottom:8px; transition:opacity .3s ease; }
.custom_tag_gbgrp::before{
    content:"до " attr(data-until);
    display:inline-flex;
    margin-bottom:3px;
    padding:1px 8px;
    border-radius:20px;
    font:400 8.5px/1.6 var(--sgb-mono);
    letter-spacing:.04em;
    font-weight:700;
    color:var(--sgb-on);
    background:var(--sgb-datebg);
}
.custom_tag_gbgrp.is-label::before{ content:attr(data-until); }
.custom_tag_gbgrp:not([data-until])::before,
.custom_tag_gbgrp[data-until=""]::before{ content:"бессрочно"; }
.custom_tag_gbit{ padding:1px 0 1px 2px; }
.custom_tag_gbit{ font-size:11px; }
.custom_tag_gbit a{ color:var(--sgb-acc) !important; text-decoration:underline !important; text-underline-offset:2px; }

.custom_tag_gbgrp.is-hot::before{
    content:"до " attr(data-until) "  •";
    background:color-mix(in srgb, var(--sgb-teal) 70%, #000);
    animation:sgbHot 1.6s ease-in-out infinite;
}
@keyframes sgbHot{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--link, 56, 108, 110), 0); } 50%{ box-shadow:0 0 0 3px rgba(var(--link, 56, 108, 110), .25); } }
.custom_tag_gbgrp.is-gone{ opacity:.38; }
.custom_tag_gbgrp.is-gone .custom_tag_gbit{ text-decoration:line-through; }

/* ---------- придержать ---------- */
.custom_tag_gbcopy{
    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-panel);
}
.sgb-copy-l{
    font:400 13px/1 var(--sgb-serif);
    text-transform:lowercase;
    color:var(--sgb-acc-dk);
    white-space:nowrap;
}
.dark .sgb-copy-l{ color:var(--sgb-acc); }
.custom_tag_gbcopy 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;
}
.custom_tag_gbcopy input:focus{ border-color:var(--sgb-acc); }
.custom_tag_gbcopy input.is-err{ border-color:#a0504a; }
.custom_tag_gbcopy .sgb-link{ flex-grow:1.6; }
.custom_tag_gbcopy button{
    padding:4px 14px;
    border:none;
    border-radius:20px;
    font:700 8.5px var(--sgb-sans);
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--sgb-on);
    background:#0f2a2b;
    cursor:pointer;
    transition:background .25s ease;
}
.custom_tag_gbcopy button:hover,
.custom_tag_gbcopy button.is-done{ background:var(--sgb-acc); }

@media (max-width:640px){
    .custom_tag_gbcopy{ flex-wrap:wrap; }
    .custom_tag_gbcopy input{ flex:1 1 100%; }
    .custom_tag_gbgrid{ grid-template-columns:1fr; }
    .custom_tag_gbchip, .custom_tag_gbacc{ flex:1 1 45%; }
    .custom_tag_gbtitle{ font-size:24px; }
    .custom_tag_gblinks{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
    .sgb-hero-img, .sgb-hero-grain, .custom_tag_gbacc .sgb-sweep, .custom_tag_gbacc::after,
    .custom_tag_gbgrp.is-hot::before{ animation:none; }
}

/* тёмная тема: тело — как у постов, бежевые плашки приглушить */
.dark .custom_tag_gb{
    --sgb-panel:rgb(var(--catbody, 31, 31, 35));
    --sgb-chipbg:#5c534b;
    --sgb-chiptx:#ece6df;
    --sgb-datebg:#5c534b;
}
.dark .custom_tag_gbchip::before{ color:rgba(236,230,223,.6); }
.dark .custom_tag_gbcopy button{ background:var(--sgb-teal); }