@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&family=Jura:wght@400;600;700&family=Manrope:wght@400;500;600;700&family=Oswald:wght@500;600&display=swap");
@import url("nx-header-home.css");
@import url("home-banner.css");
@import url("news-cards.css");
@import url("server-cards.css");

/* GameCMS: в primary.css футер завязан на .wapper > .footer (flex, фон). Без класса .footer длинные страницы вроде home/index ломают нижний блок. */
.wapper > .footer.csfoot {
	flex: 0 0 auto;
	background: #1a1520;
	border: none;
	box-shadow: none;
	padding: 0;
}

.csfoot {
 position: relative;
 background: #1a1520;
 font-family: "Manrope", sans-serif;
 border-top: 1px solid rgba(255, 255, 255, 0.06);
 overflow: hidden;
}

.csfoot-bg-img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center top;
 opacity: 0.18;
 pointer-events: none;
 z-index: 0;
}

.csfoot-canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 1;
}

.csfoot-fire {
 position: absolute;
 bottom: 0;
 pointer-events: none;
 z-index: 2;
}

.csfoot-fire--left {
 left: 0;
}

.csfoot-fire--right {
 right: 0;
}

.csfoot-fire img {
 height: 340px;
 width: auto;
 display: block;
 pointer-events: auto;
 transition: transform 0.3s ease;
}

.csfoot-fire--right img {
 animation-delay: -2s;
}

.csfoot-fire img:hover {
 transform: scale(1.06) translateY(-6px) !important;
}

.csfoot-topline {
 position: absolute;
 left: 60px;
 right: 60px;
 top: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.6) 50%, transparent);
 z-index: 3;
}

.csfoot-inner {
 position: relative;
 z-index: 4;
}

.csfoot-main {
 max-width: 1200px;
 margin: 0 auto;
 padding: 52px 24px 40px;
 display: grid;
 grid-template-columns: 220px 1fr 1fr 1fr;
 gap: 40px;
}

.csfoot-logo {
 display: inline-block;
 margin-bottom: 18px;
 text-decoration: none;
}

.csfoot-logo img {
 height: 34px;
 width: auto;
 display: block;
 filter: drop-shadow(0 0 12px rgba(255, 102, 0, 0.25));
 transition: filter 0.22s;
}

.csfoot-logo:hover img {
 filter: drop-shadow(0 0 18px rgba(255, 102, 0, 0.45));
}

.csfoot-about {
 font-size: 13px;
 color: rgba(255, 255, 255, 0.5);
 line-height: 1.65;
 margin-top: 4px;
}

.csfoot-col-title {
 font-family: "Exo 2", sans-serif;
 font-size: 11px;
 font-weight: 800;
 color: rgba(255, 255, 255, 0.32);
 text-transform: uppercase;
 letter-spacing: 0.7px;
 margin-bottom: 16px;
 display: flex;
 align-items: center;
 gap: 8px;
}

.csfoot-col-title::after {
 content: "";
 flex: 1;
 height: 1px;
 background: rgba(255, 255, 255, 0.07);
}

.csfoot-col ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 3px;
}

.csfoot-col ul li a {
 display: flex;
 align-items: center;
 gap: 7px;
 font-size: 13px;
 color: rgba(255, 255, 255, 0.56);
 text-decoration: none;
 padding: 4px 0;
 transition: color 0.18s;
 line-height: 1.35;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.csfoot-col ul li a::before {
 content: "";
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: #ff6600;
 flex-shrink: 0;
 opacity: 0.45;
 transition: opacity 0.18s;
}

.csfoot-col ul li a:hover {
 color: #ff8c40;
}

.csfoot-col ul li a:hover::before {
 opacity: 1;
}

.csfoot-divider {
 max-width: 1200px;
 margin: 0 auto;
 height: 1px;
 background: rgba(255, 255, 255, 0.06);
}

.csfoot-bottom {
 max-width: 1200px;
 margin: 0 auto;
 padding: 20px 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 flex-wrap: wrap;
}

.csfoot-copy {
 font-size: 12px;
 color: rgba(255, 255, 255, 0.3);
 line-height: 1.7;
}

.csfoot-copy a {
 color: rgba(255, 255, 255, 0.45);
 text-decoration: none;
 transition: color 0.18s;
}

.csfoot-copy a:hover {
 color: #ff6600;
}

.csfoot-copy p {
 margin: 0;
}

.csfoot-copy > * + * {
 margin-top: 4px;
}

.csfoot-counters {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.csfoot-counters a,
.csfoot-counters #cote {
 display: inline-block;
 line-height: 0;
 border-radius: 4px;
 overflow: hidden;
 opacity: 0.7;
 transition: opacity 0.18s;
}

.csfoot-counters a:hover,
.csfoot-counters #cote:hover {
 opacity: 1;
}

.csfoot-counters img {
 display: block;
 max-width: none;
}

@media (max-width: 1024px) {
 .csfoot-main {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
 }

 .csfoot-logo-block {
  grid-column: 1 / -1;
 }

 .csfoot-fire img {
  height: 220px;
 }
}

@media (max-width: 768px) {
 .csfoot-main {
  grid-template-columns: 1fr 1fr;
  padding: 40px 16px 32px;
  gap: 24px;
 }

 .csfoot-fire img {
  height: 160px;
 }
}

@media (max-width: 600px) {
 .csfoot-main {
  grid-template-columns: 1fr;
  padding: 36px 16px 120px;
  gap: 22px;
 }

 .csfoot-logo-block {
  grid-column: auto;
 }

 .csfoot-fire img {
  height: 110px;
 }

 .csfoot-fire--left {
  left: -10px;
 }

 .csfoot-fire--right {
  right: -10px;
 }

 .csfoot-bottom {
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
 }

 .csfoot-topline {
  left: 20px;
  right: 20px;
 }
}

@media (max-width: 380px) {
 .csfoot-fire img {
  height: 80px;
 }
}