@font-face{
  font-family: 'VT323';
  src: url('VT323-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Page background (meaty marble) */
:root{
  --maroon:#49060a;
  --darkmaroon:#2b0002;
  --red-accent:#e00f0f;
  --glass: rgba(0,0,0,0.25);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: 'VT323', monospace;
  background: #000;
  color:#fff;
}

/* full-screen textured background */
.page-bg{
  position:fixed;
  inset:0;
  background-image: url('Images/Meat2.jpg');
  background-size: cover;
  background-position: center;
  filter: contrast(110%) saturate(120%);
  z-index:0;
  opacity:0.95;
}

/* central wrap */
.wrap{
  position:relative;
  width: 920px; /* фиксированная ширина */
  margin: 18px auto 40px auto;
  z-index:2;
}

/* header round glossy top */
.site-header{
  width:100%;
  height:120px;
  background: linear-gradient(180deg,#5b0b0d 0%, #3a0205 60%);
  border-radius: 40px 40px 20px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.7), inset 0 -10px 20px rgba(0,0,0,0.25);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:10px;
  border: 3px solid rgba(0,0,0,0.6);
}

/* logo style (arched look imitation) */
.logo{
  font-size:44px;
  letter-spacing:6px;
  color:#fff;
  transform: rotate(-6deg);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  margin:0;
}

/* main content split */
.content{
  display:flex;
  gap:20px;
  margin-top:12px;
}

/* left column */
.left-column{
  width:640px;
}

/* cover and list area */
.cover-and-list{
  display:flex;
  gap:18px;
}

/* cover */
.cover{
  width:210px;
  height:210px;
  background: linear-gradient(180deg,#2b0002 0%, #4b0206 100%);
  padding:10px;
  border-radius:6px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.7);
}
.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border: 6px solid rgba(0,0,0,0.5);
}

/* tracklist */
.tracklist{
  list-style:none;
  padding:8px 12px;
  margin:0;
  background: linear-gradient(180deg,#3a0205,#230001);
  border-radius:6px;
  width:100%;
  color:#f8f0ee;
  font-size:18px;
  line-height:1.6;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.02);
}
.tracklist li{
  padding:6px 8px;
  cursor:pointer;
}
.tracklist li:hover{
  background: rgba(255,255,255,0.03);
  color: #ffdcdc;
}

/* blurb box */
.blurb{
  margin-top:14px;
  background: linear-gradient(180deg,#5b0b0d,#3a0205);
  padding:18px;
  border-radius:18px;
  width:350px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.7);
  font-size:20px;
  color:#ffecec;
}

/* mini posts */
.mini-posts{
  margin-top:16px;
  background: #180001;
  border-radius:6px;
  padding:8px;
  width:100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.mini-posts .mini-inner{
  height:170px;
  overflow:auto;
  padding:10px;
  background: linear-gradient(180deg,#2b0002,#120000);
  border-radius:6px;
  color:#f0dede;
  font-size:14px;
}

/* right column (nav + player) */
.right-column{
  width:240px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* nav buttons style */
.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav .button{
  display:block;
  text-decoration:none;
  color:#fff;
  background: #050505;
  border:2px solid #6b0a0a;
  padding:10px 12px;
  text-align:left;
  border-radius:3px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.6), inset 0 -2px 0 rgba(255,255,255,0.02);
  font-size:16px;
}
.nav .button:hover{
  transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(200,0,0,0.15);
}
.nav .button.active{
  outline: 3px solid rgba(255,0,0,0.12);
  background: linear-gradient(180deg,#150505,#070202);
}

/* player card */
.player{
  background: linear-gradient(180deg,#3a0205,#1c0001);
  padding:10px;
  border-radius:6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
  text-align:center;
}
.player-top h2{
  margin:6px 0;
  font-size:18px;
  color:#ffd7d7;
}

/* iframe video style */
.video-wrap{
  width:100%;
  height:140px;
  background:#000;
  margin:8px 0;
  border-radius:4px;
  overflow:hidden;
}
.video-wrap iframe{
  width:100%;
  height:100%;
  border:0;
}

/* controls */
.controls{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}
.ctrl{
  background:#120000;
  border:1px solid #5b0b0d;
  padding:6px 10px;
  border-radius:4px;
  color:#fff;
  font-size:16px;
}

/* footer gif strip */
.footer{
  margin-top:14px;
  padding:8px;
  display:flex;
  justify-content:center;
}
.gif-container {
  display: flex;
  flex-wrap: wrap;       /* перенос строк если много */
  justify-content: center; /* центрируем по горизонтали */
  gap: 10px;             /* расстояние между картинками */
  margin: 20px 0;
}

.gif-container img {
  max-height: 150px; /* можно ограничить размер */
}
/* scrollbar small retro */
.mini-posts .mini-inner::-webkit-scrollbar,
.gif-container::-webkit-scrollbar{
  height:8px;
  width:8px;
}
.mini-posts .mini-inner::-webkit-scrollbar-thumb,
.gif-container::-webkit-scrollbar-thumb{
  background: rgba(120,10,10,0.8);
  border-radius:6px;
}

/* responsive fallback (not necessary but safe) */
@media (max-width:980px){
  .wrap{width:94%}
  .content{flex-direction:column}
  .left-column, .right-column{width:100%}
}