/* ==========================================================
   Retro LAN Party — адаптивная рамка + мобильная версия
   Включается скриптом /static/rlp/responsive.js (класс html.rlp).
   Без JS сайт выглядит как раньше.
   ========================================================== */
html.rlp{--s:.672;--m:20px;--z:1;--tabs:0px;overflow-x:hidden}
html.rlp body{
  width:auto;margin:0;background:#000;
  padding:calc(178px*var(--s)) calc(var(--m) + 128px*var(--s)) calc(64px*var(--s) + var(--tabs)) calc(var(--m) + 105px*var(--s));
}
html.rlp .header,
html.rlp .cyberborder,
html.rlp .footer,
html.rlp .content>div[style*="position:fixed"]{display:none!important}

/* ---------- рамка из 8 частей ---------- */
.rlp-frame{position:fixed;top:0;bottom:0;left:var(--m);right:var(--m);pointer-events:none;z-index:102}
.rlp-frame>i{position:absolute;display:block;background-repeat:no-repeat;background-size:100% 100%}
.rlp-tl{left:0;top:0;width:calc(1140px*var(--s));height:calc(700px*var(--s));background-image:url(/static/img/frame/tl.png)}
.rlp-tm{left:calc(1140px*var(--s) - 2px);right:calc(192px*var(--s) - 2px);top:0;height:calc(180px*var(--s));background-image:url(/static/img/frame/tm.png)}
.rlp-tr{right:0;top:0;width:calc(192px*var(--s));height:calc(700px*var(--s));background-image:url(/static/img/frame/tr.png)}
.rlp-rl{left:calc(60px*var(--s));width:calc(70px*var(--s));top:calc(228px*var(--s));bottom:calc(160px*var(--s));background-image:url(/static/img/frame/rail_l.png)}
.rlp-rr{right:calc(82px*var(--s));width:calc(75px*var(--s));top:calc(228px*var(--s));bottom:calc(160px*var(--s));background-image:url(/static/img/frame/rail_r.png)}
.rlp-bl{left:0;bottom:0;width:calc(660px*var(--s));height:calc(320px*var(--s));background-image:url(/static/img/frame/bl.png)}
.rlp-bm{left:calc(660px*var(--s) - 2px);right:calc(612px*var(--s) - 2px);bottom:0;height:calc(75px*var(--s));background-image:url(/static/img/frame/bm.png)}
.rlp-br{right:0;bottom:0;width:calc(612px*var(--s));height:calc(320px*var(--s));background-image:url(/static/img/frame/br.png)}

/* чёрные шторки сверху и снизу — контент уезжает под рамку, как в оригинале */
.rlp-mask-t,.rlp-mask-b{position:fixed;left:0;right:0;background:#000;z-index:100;pointer-events:none}
.rlp-mask-t{top:0;height:calc(178px*var(--s))}
.rlp-mask-b{bottom:0;height:calc(64px*var(--s) + var(--tabs))}

/* бегущая строка в «пилюле» */
.rlp-ticker{position:fixed;z-index:103;left:calc(var(--m) + 850px*var(--s));right:calc(var(--m) + 150px*var(--s));top:calc(96px*var(--s));height:calc(48px*var(--s));display:flex;align-items:center;overflow:hidden}
.rlp-ticker marquee{width:100%;font-size:calc(26px*var(--s))}

/* экран */
html.rlp .content{width:auto;zoom:var(--z);box-sizing:border-box;padding-bottom:40px;
  min-height:calc((100vh - 242px*var(--s) - var(--tabs)) / var(--z))}
html.rlp .flex-container{text-align:center}
html.rlp .box div[style*="overflow-y:scroll"]{width:auto!important}

/* ---------- широкие экраны: 3 колонки ---------- */
html.rlp-w3 .content{grid-template-columns:230px minmax(0,1fr) 250px}
html.rlp-w3 #left{display:contents}
html.rlp-w3 #left>.box_sidebar:first-child{grid-column:1;grid-row:1/span 3;border-right:2px dotted #00FF1B}
html.rlp-w3 #right{grid-column:2;grid-row:1/span 3;min-width:0}
html.rlp-w3 #left>.box_sidebar:not(:first-child){grid-column:3;border-left:2px dotted #00FF1B}
html.rlp-w3 #left>.box_sidebar:nth-child(4){grid-row:3/span 20}
html.rlp-w3 .box div[style*="overflow-y:scroll"]{height:340px!important}
html.rlp-w3 .box iframe[src*="matrix"]{width:100%!important;height:300px}
html.rlp-w3 .box img[src*="matrix_has_you"]{width:100%!important;height:auto;image-rendering:pixelated}
html.rlp-w3 .flex-container{display:flex;gap:10px;justify-content:center}
html.rlp-w3 .flex-container a{flex:0 1 360px}
html.rlp-w3 .icon{width:100%;height:auto}
html.rlp-w3 #right>.box:first-child>a.text{display:inline-block;max-width:1000px}
html.rlp-w3 .marquee img{width:88px;height:31px}

/* ---------- телефон: «мини-монитор» ---------- */
html.rlp-mob{--tabs:58px}
html.rlp-mob body{-webkit-text-size-adjust:100%}
html.rlp-mob::-webkit-scrollbar{width:0}
html.rlp-mob .rlp-ticker marquee{font-size:11px}
html.rlp-mob .content{grid-template-columns:1fr;padding-bottom:16px}
html.rlp-mob #left{display:contents}
html.rlp-mob #right{grid-row:1;min-width:0}
html.rlp-mob #left>.box_sidebar:first-child{display:none}
html.rlp-mob #left>.box_sidebar:not(:first-child){border-top:2px dotted #00FF1B;padding:14px}
html.rlp-mob #left>.box_sidebar:nth-child(4) br{display:none}
html.rlp-mob #left>.box_sidebar:nth-child(4) .titlething,
html.rlp-mob #left>.box_sidebar:nth-child(4) .text{display:block;margin-bottom:10px}
html.rlp-mob #left>.box_sidebar:nth-child(4) a[href]{display:inline-block;margin-right:6px}
html.rlp-mob .icon-social{width:56px;height:56px;display:inline-block}
html.rlp-mob .box{padding:14px 12px}
html.rlp-mob .text{font-size:15px}
html.rlp-mob a:link,html.rlp-mob a:link:hover{font-size:16px}
html.rlp-mob .titlething[style]{font-size:21px!important}
html.rlp-mob .box>img[src*="swirly"]{width:24px;vertical-align:middle}
html.rlp-mob .flex-container{display:flex;gap:8px}
html.rlp-mob .flex-container a{flex:1}
html.rlp-mob .icon{width:100%;height:auto;padding:0}
html.rlp-mob .box div[style*="overflow-y:scroll"]{height:280px!important;-webkit-overflow-scrolling:touch}
html.rlp-mob .post,html.rlp-mob .post a:link{font-size:14px}
html.rlp-mob #right img,html.rlp-mob #right video,html.rlp-mob #right canvas{max-width:100%;height:auto}
html.rlp-mob #right iframe{max-width:100%}
html.rlp-mob #right [style*="width:"]:not(ul):not(li){max-width:100%;box-sizing:border-box}
html.rlp-mob #right table{max-width:100%}
html.rlp-mob .box iframe[src*="matrix"]{width:100%!important}
html.rlp-mob .box img[src*="informer"]{width:88px;height:31px}
html.rlp-mob .marquee img{width:88px;height:31px;margin:0 3px}

/* нижние вкладки */
.rlp-tabs,.rlp-sheet{display:none}
html.rlp-mob .rlp-tabs{display:flex;position:fixed;z-index:101;left:calc(128px*var(--s));right:calc(155px*var(--s));bottom:calc(64px*var(--s));height:58px;background:#050805;border-top:2px dotted #00FF1B}
.rlp-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none!important;font:11px 'Play',sans-serif!important;color:#00FF1B!important;-webkit-tap-highlight-color:transparent}
.rlp-tabs a b{font-size:19px;line-height:1;font-weight:normal;filter:drop-shadow(0 0 4px #00ff1b)}
.rlp-tabs a.on,html.rlp-more .rlp-tabs a.rlp-more-btn{background:#0d2210;color:#fff!important}

/* компактное меню «Ещё» */
html.rlp-mob.rlp-more .rlp-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:fixed;z-index:101;left:calc(128px*var(--s));right:calc(155px*var(--s));bottom:calc(64px*var(--s) + 58px);background:rgba(5,8,6,.97);border-top:2px dotted #00FF1B;padding:10px 10px 12px;box-shadow:0 -12px 30px #000}
.rlp-sheet .titlething{grid-column:1/-1;font-size:14px!important;margin:0 2px 2px;letter-spacing:.5px}
.rlp-sheet a.text{font-size:13px!important;line-height:1.2;padding:7px 4px;text-align:center;text-decoration:none;border:1px solid #1d5a26;border-radius:4px;background:#07120a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent}
.rlp-sheet a.text.on,.rlp-sheet a.text:active{background:#00FF1B;color:#000!important}

/* ---------- кнопка «Гачимучка»: всплывает внизу справа при прокрутке ---------- */
html.rlp body > button.button{
  position:fixed!important;left:auto!important;top:auto!important;
  right:calc(var(--m) + 165px*var(--s));
  bottom:calc(64px*var(--s) + var(--tabs) + 16px);
  z-index:104;margin:0;padding:10px 14px;
  box-shadow:inset 0 -3px 7px 0 #29bbff,0 6px 18px rgba(0,0,0,.6),0 0 14px rgba(41,187,255,.35);
  opacity:0;pointer-events:none;transform:translateY(60px) scale(.5) rotate(-8deg);
  transition:transform .45s cubic-bezier(.2,1.7,.4,1),opacity .25s ease;
}
html.rlp.rlp-gachi body > button.button{opacity:1;pointer-events:auto;transform:none;animation:rlp-gachi-wiggle 4s ease-in-out 1s infinite}
html.rlp body > button.button:hover{animation:none;transform:scale(1.08)}
@keyframes rlp-gachi-wiggle{0%,86%,100%{transform:none}89%{transform:rotate(-6deg) scale(1.05)}92%{transform:rotate(5deg) scale(1.05)}95%{transform:rotate(-3deg)}}
html.rlp-mob body > button.button{right:calc(155px*var(--s) + 10px);bottom:calc(64px*var(--s) + var(--tabs) + 10px);font-size:14px;padding:8px 11px}