:root {
  /* Переменные safe-area из Telegram WebApp */
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
  --tg-viewport-height-diff: 0px;
  --tg-safe-area-top: env(safe-area-inset-top, 0px);
  --tg-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-area-left: env(safe-area-inset-left, 0px);
  --tg-safe-area-right: env(safe-area-inset-right, 0px);
  --iphone-safe-bottom: max(env(safe-area-inset-bottom, 0px), 34px);
  --custom-safe-bottom: 0px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}
  
}

html, body {
  /* Отключение эффекта bounce при скролле */
  overscroll-behavior: none;
  /* Предотвращение упругого скролла на iOS */
  -webkit-overflow-scrolling: auto;
  /* Зафиксировать размер */
  position: fixed;
  width: 100%;
  height: 100%;
}


::-webkit-scrollbar {
	display: none!important;
}

body {
  margin: 0;
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: white;
  padding-top: var(--tg-safe-area-top);
  padding-bottom: var(--tg-safe-area-bottom);
  padding-left: var(--tg-safe-area-left);
  padding-right: var(--tg-safe-area-right);
            height: 100vh;
            overflow: hidden;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;	
	
}

* {
    box-sizing: border-box;
        }
main {
	  background: linear-gradient(-45deg, #333333, #131221, #111111, #192522);
             width: 100vw;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            /* Предотвращаем bounce эффект на iOS */
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: none !important;
			  display: flex;
  justify-content: center;
    	animation: gradient 10s ease infinite;
	background-size: 400% 400%;
	            overscroll-behavior: none;
            overscroll-behavior-y: none;
            /* Улучшенная прокрутка для iOS */
            -webkit-overflow-scrolling: touch;
            /* Дополнительная защита */
            scroll-behavior: smooth;
			scroll-snap-type: none;
}

.no-scroll-prikol {
	    width: 100vw;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            /* Предотвращаем bounce эффект на iOS */
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.content-wrapper {
  /* Это гарантирует, что ваш контент не будет перекрыт элементами управления */
  padding-left: var(--tg-safe-area-left);
  padding-right: var(--tg-safe-area-right);
  /* Если у вас есть Header и Footer, то добавьте их высоту к отступам */
  margin-top: var(--header-height, 0px);
  overflow-y: auto;
  height: 100%;
  width: 100%;
  /* Чтобы контент не перекрывался */
  padding-top: var(--tg-safe-area-top);
  padding-bottom: calc(var(--footer-height, 56px) + var(--custom-safe-bottom));
  
}

.has-notch .content-wrapper {
  padding-bottom: calc(var(--footer-height, 56px) + var(--tg-safe-area-bottom, 34px));
}

button {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.profile-link {
  text-decoration: none;
  color: #fff; 
}

.mobile-footer {
  background: #000000;
  border-top: 1px solid #333333;
  position: fixed;
  width: 100%;
  bottom: 0px;
  height: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: 0px 0px 20px 0px #333333;

}

.safe-area-spacer {
  height: var(--safe-area-bottom);
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: transparent;
  pointer-events: none;
}


body.has-notch {
  /* Дополнительные стили для устройств с челкой при необходимости */
}

.footer {
  padding-bottom: var(--safe-area-bottom);
}


.has-notch .footer {
  padding-bottom: var(--tg-safe-area-bottom, 34px);
}

.mobile-links {
  margin-bottom: 10px;
  display: flex;
  min-width: 280px;
  max-width: 660px;
  width: 100%;
  justify-content: space-between;
}

.mobile-links a {
  width: 60px;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 10px;
  text-decoration: none;
  color: #fff;
}

.mobile-links p {
  margin: 2px 0px 0px 0px;
}

.active-rewards {
  padding-bottom: 10px;
}

.rewards-tabs {
  padding-bottom: 20px; 
  display: flex;
}

.rewards-tab {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  height: 48px;
}


.rewards-tab:first-child {
  background-color: #1c1c1c;
  margin-right: 10px;
  color: white;
}

.rewards-tab:last-child {
  background-color: #29a9ff;
  color: white;
}

.sub-button:last-child {
  margin-bottom: 30px;
}

.container {
  box-sizing: border-box;
  width: 100%;
  justify-self: center;
  min-width: 320px;
  padding: 20px 20px 120px 20px;
  max-width: 680px;
}

.coin-icon-home {
  margin-right: 10px;
}

.coin-icon-quest {
  margin-left: 2px;
}

.coin-icon-store {
  margin-left: 2px;
}

.profile {
  display: flex;
  align-items: center;
  background-color: #1c1c1c;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
}

.profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-size: 14px;
}

.weapon {
  display: block;
  width: 100%;
  max-width: 100%;
}

.shots {
  text-align: center;
  margin-bottom: 20px;
}

.shots img {
  width: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

.shots-number {
  font-size: 24px;
  font-weight: bold;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  height: 48px;
}

.btn:first-child {
  background-color: #1c1c1c;
  margin-right: 10px;
  color: white;
}

.btn:last-child {
  background-color: #29a9ff;
  color: white;
}

.h2-like {
  font-size: 16px;
  margin: 0px;
}

.h2-subtext {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 10px;
}

.sub-button {
  background-color: #1c1c1c;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 14px;
}

.label-quest {
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  background-color: #333;
  text-align: center;
}

.h2-subtitle {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.card {
  background-color: #1c1c1c;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.card-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name {
  font-size: 14px;
}

.price {
  background-color: #29a9ff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.price img {
  width: 14px;
  margin-right: 5px;
}

.active-quest {
  background-color: #29a9ff;
}

.friend-profile {
  justify-content: space-between;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.friend-profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.friend-info {
  align-items: center;
  display: flex;
}

.friendname {
  height: 20px;
  font-size: 14px;
}

.tabs{
  width: 100%;
}

.tabs-nav{
  display: flex;
  padding-bottom: 20px;
}

.tabs-nav button:nth-child(1){
  margin-right: 10px;
}

.tabs-nav button{
  background: #333333;
  border-radius: 10px;
  width: 50%;
  color:#ffffff;
  border:none;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  outline:none;
}
.tabs-nav button.active_tab {
  color: #fff;
  background-color: #29a9ff;
}
.tabs-nav button:hover{
  background: #F5F5F5;
  cursor:pointer;
}
.tabs-nav button.active_tab:hover{
  background-color: #29a9ff;
  opacity:0.9;
}
#tabs__content{
  padding: 0px;
}
.single__tab{
  display:none;

}
.single__tab.active_tab{
  display:block;
}


.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal_active {
  display: block;
}

.modal-content {
  height: 100vh;
  position: relative;
  background-color: #333333;
  padding: 30px 20px;
  animation-name: animatetop;
  animation-duration: 0.8s;
  max-width: fit-content;
  text-align: center;
  color: #FFFFFF;
}


.indicator-arrows {
  display: flex;
}

.caseTitle {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin: 20px 0 10px;
  color: white;
}

.caseSubtitle {
  font-size: 14px;
  text-align: center;
  color: #8f8f8f;
  margin: 0 0 20px;
}




.profile-header {
      display: flex;
      align-items: center;
      background-color: #222222;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
    }
    
    .profile-header img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    
    .menu-item {
	  font-size: 16px;
	  text-align: left;
	  width: 100%;
      display: flex;
	  outline: 0px;
	  border: 0px;
      align-items: center;
      justify-content: space-between;
      background-color: #222222;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 10px;
      color: white;
      text-decoration: none;
    }
    
    .menu-icon {
	  display: flex;
	  width: 30px;
	  height: 30px;
	  background-color: #FF66CC;
	  border-radius: 6px;
	  margin-right: 10px;
	  align-content: center;
	  justify-content: center;
	  align-items: center;
    }
    
    .menu-text {
      flex-grow: 1;
    }
    
    .menu-container {
      margin-bottom: 20px;
    }
    
    .inventory-buttons {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    
    .inventory-btn {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      color: white;
    }
    
    .inventory-btn:first-child {
      background-color: #29a9ff;
      margin-right: 10px;
    }
    
    .inventory-btn:last-child {
      background-color: #333333;
    }
    
    .skins-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 80px;
    }
    
    .skin-card {
	  height: 215px;
      background-size: 400% auto, contain;
      border: 0px;
      background-color: #003366;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      color: white;
	  text-decoration: none;
	  justify-content: space-between;
	  cursor: pointer;
    }

.skin-card p {
	white-space: normal;
}
	
    .skin-image {
      width: 100%;
	  height: 100%;
	  object-fit: contain;
    }
    
    .skin-name {
      font-size: 12px;
      text-align: center;
      font-weight: bold;
      margin: 0;

    }
    
    .skin-details {
      font-size: 9.5px;
      text-align: center;
      color: #cccccc;
      margin: 2px 0;
    }
    
    .skin-price {
		    width: 100%;
      background-color: rgb(9 12 14 / 30%);
      padding: 4px 0;
      border-radius: 5px;
      font-size: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
    }
	
.details-container {
    width: 100%;
	padding-top: 30px;
}

.details-table {
	font-size: 14px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background-color: #222;
}

.detail-label {
	font-weight: 300;
}

.details-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
}

.details-row:last-child {
    border-bottom: none;
}

.weapon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/texture2.webp');
  background-size: cover;
  mix-blend-mode: overlay; /* попробуйте также multiply или soft-light */
  pointer-events: none;
}

.weapon-item {
	padding: 0px 0px 180px 0px;
}

.weapon-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            background-image: url("data:image/svg+xml,<svg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.7754 34.1503C16.9296 32.9962 18.1256 32.1149 19.3532 31.4959C20.1821 31.5483 20.9795 31.3175 21.6195 30.8663C21.7454 30.8873 21.8923 30.8663 22.0287 30.8139L22.1021 30.7824C22.4588 30.6355 22.7106 30.6145 22.8575 30.6355C23.0044 30.6565 23.0988 30.709 23.1723 30.7824C23.3611 30.9503 23.4451 31.2441 23.4766 31.3805C23.5605 31.8421 24.0221 32.1359 24.4943 31.9995C25.3441 31.7582 25.7428 31.989 25.9527 32.1778C26.215 32.4192 26.3199 32.7549 26.3514 32.8913C26.4563 33.332 26.9179 33.6048 27.3481 33.4893L27.432 33.4684C27.8517 33.3634 28.1455 33.4054 28.3239 33.4579C28.4183 33.4893 28.4917 33.5208 28.5232 33.5313C28.5337 33.5418 28.5337 33.5418 28.5337 33.5418C28.8275 33.8146 28.9009 34.1608 28.8275 34.591C28.754 35.0631 28.5232 35.5038 28.3868 35.7661C28.3239 35.871 28.2819 35.9969 28.2609 36.1228C28.2084 36.49 28.3343 36.8678 28.6491 37.0986L29.1737 37.4973C29.3206 37.6022 29.499 37.6756 29.6668 37.6966C32.2688 39.7111 33.4125 42.1557 33.8216 44.4115C33.2131 45.9643 32.1639 47.4961 30.6845 48.9755L24.83 54.83L9.96289 39.9629L15.7754 34.1503ZM25.1133 47.5171L27.2117 45.4187C28.1455 44.4849 28.7225 43.5931 28.9324 42.7328C29.1422 41.8514 28.8904 41.3059 28.2084 40.6239L24.2215 36.6369C23.3821 35.7976 23.0044 35.6927 22.1126 35.913C21.2103 36.1228 20.245 36.7314 19.2378 37.7386L17.2863 39.6901L25.1133 47.5171Z' fill='%23F2F2F2' fill-opacity='0.6'/><path d='M38.3156 24.4074L35.4198 14.2931L40.0363 9.67663L54.8929 24.5333L51.0948 28.3314L41.631 18.8676L44.4009 29.1497L42.9111 30.6396L32.566 27.9327L42.0297 37.3964L38.2316 41.1945L38.0008 40.9637C37.749 37.5223 36.3011 34.8784 35.4408 33.5983C35.4618 33.5564 35.4618 33.5144 35.4723 33.4619L35.4827 33.4095C35.5142 33.1262 35.4198 32.8219 35.2099 32.5911L35.168 32.5491L34.5594 31.9616L34.3181 31.9301C33.3319 31.8042 32.6499 31.2481 32.1883 30.6606C31.9574 30.3668 31.7896 30.094 31.6846 29.8842C31.6217 29.7793 31.6007 29.6953 31.5692 29.6429C31.5587 29.6114 31.5483 29.6009 31.5483 29.5799L31.5378 29.5694L31.4643 29.3491L31.3279 29.2547C29.5758 27.4605 27.1836 26.2225 25.1586 25.4146C24.9488 25.3307 24.7494 25.2572 24.5501 25.1838L28.1908 21.5431L38.3156 24.4074Z' fill='%23F2F2F2' fill-opacity='0.6'/><mask id='mask0_432_9700' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='29' y='33' width='9' height='19'><path d='M37.2767 44.3736C38.0741 39.3164 35.8288 35.3714 34.7796 33.8606L34.0767 34.5846C34.2131 34.7839 34.2655 35.0252 34.2131 35.2665L34.2026 35.319C34.1501 35.5603 34.0137 35.7597 33.8249 35.9065C33.6465 36.0429 33.4157 36.1059 33.1953 36.0954L33.1534 36.0954C32.8806 36.0744 32.6393 35.938 32.4714 35.7282C31.9992 35.8646 31.0025 36.2318 29.9218 37.1866C34.9475 41.0581 35.0209 46.3775 34.5383 49.4202C34.4124 50.1966 34.255 50.8366 34.1291 51.2563L34.0872 51.4242C34.0767 51.4766 34.1396 51.4976 34.1711 51.4661L34.1816 51.4557C36.0282 48.9586 36.9305 46.5664 37.2767 44.3736Z' fill='white'/></mask><g mask='url(%23mask0_432_9700)'><path d='M36.7309 51.7797L34.8423 33.2299L43.5927 32.3276L45.4917 50.8879L36.7309 51.7797Z' fill='white' fill-opacity='0.6'/><path d='M27.9907 52.6743L26.1021 34.1244L34.8419 33.2326L36.7305 51.7824L27.9907 52.6743Z' fill='white' fill-opacity='0.6'/><path d='M34.842 33.2316L32.9429 14.6713L41.6932 13.79L43.5818 32.3398L34.842 33.2316Z' fill='white' fill-opacity='0.6'/><path d='M26.1027 34.1223L24.1932 15.5724L32.9435 14.6701L34.8425 33.2304L26.1027 34.1223Z' fill='white' fill-opacity='0.6'/></g><path d='M37.2767 44.3736C38.0741 39.3164 35.8288 35.3714 34.7796 33.8606L34.0767 34.5846C34.2131 34.7839 34.2655 35.0252 34.2131 35.2665L34.2026 35.319C34.1501 35.5603 34.0137 35.7597 33.8249 35.9065C33.6465 36.0429 33.4157 36.1059 33.1953 36.0954L33.1534 36.0954C32.8806 36.0744 32.6393 35.938 32.4714 35.7282C31.9992 35.8646 31.0025 36.2318 29.9218 37.1866C34.9475 41.0581 35.0209 46.3775 34.5383 49.4202C34.4124 50.1966 34.255 50.8366 34.1291 51.2563L34.0872 51.4242C34.0767 51.4766 34.1396 51.4976 34.1711 51.4661L34.1816 51.4557C36.0282 48.9586 36.9305 46.5664 37.2767 44.3736Z' stroke='%23F2F2F2' stroke-opacity='0.6' stroke-width='0.25'/><path opacity='0.25' d='M32.4928 35.6858C32.6607 35.8956 32.8915 36.0425 33.1643 36.0635C33.3951 36.0845 33.6259 36.0215 33.8253 35.8851C34.0246 35.7487 34.1505 35.5389 34.1925 35.3081C34.1925 35.2871 34.203 35.2766 34.203 35.2556C34.2345 35.0143 34.182 34.773 34.0456 34.5736L34.7696 33.8287C35.8083 35.329 38.0745 39.295 37.2771 44.3731C36.9309 46.5659 36.0181 48.9476 34.182 51.4552C34.14 51.5182 34.0456 51.4657 34.0561 51.4132C34.0561 51.4132 34.0561 51.4132 34.0666 51.4027C34.1925 50.9831 34.3813 50.2906 34.5177 49.3988C35.0004 46.3561 34.9164 41.0472 29.8908 37.1756C30.9924 36.1999 32.0207 35.8222 32.4928 35.6858ZM34.7591 49.4303C34.6856 49.8394 34.6227 50.2172 34.5387 50.5319C35.8712 48.5279 36.7106 46.4505 37.0358 44.3416C37.2666 42.8728 37.2561 41.3934 37.0043 39.9245C36.805 38.7389 36.4483 37.5638 35.9447 36.4307C35.5879 35.6123 35.1997 34.9303 34.864 34.4057C35.8397 36.6825 37.4975 41.7606 35.6719 47.0276C35.6614 47.0381 35.6509 47.0276 35.6509 47.0276C35.8187 46.0833 36.9204 38.6445 30.1426 37.0707C35.2312 41.0472 35.2312 46.503 34.7591 49.4303Z' fill='%23F2F2F2' fill-opacity='0.6'/><path d='M19.7976 24.9426C19.8291 24.9531 19.8816 24.9636 19.913 24.9741C19.934 25.079 19.9865 25.1525 20.0704 25.2154C21.214 26.0233 21.6967 27.1145 21.4763 28.447C21.3819 29.108 21.1301 29.6326 21.0252 29.8214C21.0147 29.8529 21.0042 29.8844 20.9937 29.9158C20.9832 29.9263 20.9937 29.9368 20.9937 29.9368C20.3537 30.4929 19.4829 30.7552 18.5911 30.5978C17.0592 30.325 16.01 28.8771 16.2199 27.3453C16.2513 27.146 16.3038 26.9466 16.3668 26.7578C16.2723 26.4955 16.1149 26.3171 15.989 26.1912C15.9156 26.1177 15.9576 25.9918 16.052 25.9814C16.3668 25.9394 16.6605 25.8764 16.9543 25.7925C17.8356 25.5407 18.5911 25.121 19.0632 24.8377C19.2311 24.7328 19.3675 24.6384 19.4409 24.5859C19.4829 24.5649 19.5248 24.5649 19.5563 24.5964C19.5878 24.6908 19.6717 24.7958 19.7976 24.9426ZM17.2166 27.4607C17.0592 28.4994 17.7622 29.4752 18.8009 29.6326C19.8396 29.7899 20.8153 29.087 20.9727 28.0483C21.1301 27.0096 20.4271 26.0338 19.3884 25.8764C18.3602 25.7086 17.3845 26.4115 17.2166 27.4607Z' fill='%23F2F2F2' fill-opacity='0.6'/><path d='M30.8035 29.6958C30.8035 29.6958 31.7373 32.3083 34.2763 32.623L34.7275 33.0532C34.8009 33.1266 34.8429 33.2316 34.8219 33.3365C34.8114 33.3889 34.7799 33.4624 34.738 33.5043L34.633 33.6093L33.7097 34.5745C33.8986 34.7214 34.0035 34.9732 33.9616 35.225C33.9511 35.2355 33.9616 35.246 33.9511 35.2565C33.8776 35.6027 33.5524 35.8441 33.2061 35.8126C32.9438 35.7811 32.7235 35.6237 32.6396 35.3929C32.2619 35.4768 31.0553 35.8231 29.7438 36.9877C29.7333 36.9982 29.7228 37.0087 29.7123 37.0192C29.6284 37.0611 29.5234 37.0611 29.45 37.0087L28.9149 36.5995C28.8205 36.526 28.7785 36.4211 28.7995 36.3162C28.81 36.2847 28.8205 36.2532 28.8415 36.2113C29.0093 35.9175 29.3031 35.3509 29.3975 34.7319C29.492 34.1129 29.3975 33.4309 28.81 32.9273C28.81 32.9273 28.1385 32.4027 26.9109 32.7279C26.8795 32.7384 26.8375 32.7174 26.8165 32.6755C26.7326 32.2978 26.1765 30.5666 23.9522 31.1961C23.9207 31.2066 23.8683 31.1751 23.8578 31.1437C23.7738 30.7659 23.3332 29.1502 21.3082 30C21.2768 30.0105 21.2558 29.9895 21.2558 29.9685L21.2663 29.9581C21.3187 29.8426 21.4341 29.6223 21.5391 29.3285C21.623 29.0977 21.6964 28.8144 21.7489 28.5102C21.8958 27.5449 21.7699 26.2859 20.5423 25.2681C20.4374 25.1842 20.3325 25.1003 20.2276 25.0163C20.1856 24.9954 20.1751 24.9429 20.1751 24.9009L20.2171 24.6281C20.2276 24.5547 20.2905 24.5127 20.3535 24.5337C21.2977 24.7226 27.4146 26.16 30.8035 29.6958Z' fill='%23F2F2F2' fill-opacity='0.6'/></svg>");
            background-repeat: repeat;
            background-size: 64px 64px;
            animation: moveTexture 20s linear infinite;
}

.weapon-showcase {
	
    background: 
	url('../img/texture2.webp'),
	#40AFFF;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*
.weapon-image {
    width: 80%;
    max-width: 300px;
    margin-bottom: 20px;
}
*/

.weapon-name-block {
	padding: 8px 0 0 0;
    width: 100%;
	background-color: #00000057;
}
.weapon-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.weapon-origin {
    font-size: 12px;
    color: #ccc;
    padding: 8px 0 8px 0;
    background-color: #00000057;
}

.weapon-image-large {
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.action-buttons {
    display: flex;
    max-width: 300px;
    justify-content: space-between;
    margin-top: 10px;
	gap: 20px;
}

.action-button {
	height: 58px;
    background-color: #29a9ff;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 10px 0;
    width: 100px;
    text-align: center;
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.detail-price {
	display: flex;
	align-items: flex-end;
}

.close-button-block {
	background: linear-gradient(0deg, black, transparent);
    box-sizing: border-box;
    z-index: 10;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 20px;
    justify-self: center;
}

.close-button {
    align-items: center;
    justify-content: center;
    justify-self: center;
    display: flex;
    min-width: 280px;
    max-width: 660px;
    height: 48px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    border: none;
    background: #00a8ff;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.weapon-image-wrap {
    display: flex;
    max-width: 300px;
    max-height: 180px;
    align-items: center;
}

.weapon-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

.sellbutton_block {
	padding-top: 20px;
	font-size: 14px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 10px;
}

.sellbutton {
	height: 58px;
    border: none;
    background: #333;
    color: #fff;
	font-size: 14px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 10px;
}

.pricing-content {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.buy-button {
	font-size: 16px;
    background-color: #1c1c1c;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    width: 100%;
    outline: none;
    border: none;
    margin-bottom: 0px;
}

.buy-button.processing .pricing-content {
    display: none;
}

.buy-button.processing .processing-overlay {
    display: flex;
}

.processing-overlay {
    display: none;
    width: 100%;
}

.home-store {
	display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
	padding: 0px;
}

.pricing-grid {
	display: flex;
	gap: 20px;
	flex-direction: column;
}

.star-pricing {
	display: flex;
	gap: 5px;
	align-items: center;
}

#rarity-color-Consumer {

	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(110, 125, 137, 1) 0%, rgba(61, 69, 75, 1) 100%);
	
    
}

#rarity-color-Industrial {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(99, 162, 228, 1) 0%, rgba(0, 57, 118, 1) 100%);
	
    
}

#rarity-color-Mil-Spec {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(13, 95, 153, 1) 0%, rgba(0, 50, 86, 1) 100%);
	
    
}

#rarity-color-Classified {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(220, 47, 239, 1) 0%, rgba(74, 0, 82, 1) 100%);
	
    
}

#rarity-color-Restricted {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(127, 79, 246, 1) 0%, rgba(57, 27, 127, 1) 100%);
	
    
}

#rarity-color-Covert {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(246, 79, 77, 1) 0%, rgba(105, 1, 0, 1) 100%);
	
    
}

#rarity-color-Contraband {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(248, 211, 0, 1) 0%, rgba(114, 97, 0, 1) 100%);
	
    
}






#common{
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(110, 125, 137, 1) 0%, rgba(61, 69, 75, 1) 100%);
	
    
}

#uncommon {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(99, 162, 228, 1) 0%, rgba(0, 57, 118, 1) 100%);
	
    	
}

#rare {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(13, 95, 153, 1) 0%, rgba(0, 50, 86, 1) 100%);
	
    
}

#mythical {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(220, 47, 239, 1) 0%, rgba(74, 0, 82, 1) 100%);
	
    

}

#legendary {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(127, 79, 246, 1) 0%, rgba(57, 27, 127, 1) 100%);
	
    
}

#ancient {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(246, 79, 77, 1) 0%, rgba(105, 1, 0, 1) 100%);
	

}




/* ЕБАТЬ ТУТ ЦВЕТОВ*/


.rarity-common {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(110, 125, 137, 1) 0%, rgba(61, 69, 75, 1) 100%);
	
    
}

.rarity-uncommon {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(99, 162, 228, 1) 0%, rgba(0, 57, 118, 1) 100%);
	
    	
}

.rarity-rare {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(13, 95, 153, 1) 0%, rgba(0, 50, 86, 1) 100%);
	
    
}

.rarity-mythical {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(220, 47, 239, 1) 0%, rgba(74, 0, 82, 1) 100%);
	
    

}

.rarity-legendary {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(127, 79, 246, 1) 0%, rgba(57, 27, 127, 1) 100%);
	
    
}

.rarity-ancient {
	background: 
	url('../img/texture2.webp'),
	radial-gradient(circle,rgba(246, 79, 77, 1) 0%, rgba(105, 1, 0, 1) 100%);
	

}



        .skin-card#ancient::before { background: #eb4b4b; }
        .skin-card#legendary::before { background: #d32ce6; }
        .skin-card#mythical::before { background: #8847ff; }
        .skin-card#rare::before { background: #4b69ff; }
        .skin-card#uncommon::before { background: #5e98d9; }
        .skin-card#common::before { background: #b0c3d9; }

        .skin-image-block {
			
			display: flex;
			text-align: center;
			/* margin-bottom: 8px; */
			justify-content: center;
			align-items: center;
		}
        .skin-image {
            max-width: 100%;
            height: 84px;
            object-fit: contain;
        }


        .loading {
            text-align: center;
            padding: 40px;
            color: #aaa;
            font-size: 18px;
        }

        /* Модальное окно */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            justify-content: center;
            align-items: flex-start;
            z-index: 1000;
            padding: 20px;
            overflow-y: auto;
        }

        .modal-overlay.show {
            display: flex;
        }

        .weapon-modal {
            background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
            border-radius: 16px;
            max-width: 400px;
            width: 100%;
            margin: auto;
            overflow: hidden;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            animation: modalSlideIn 0.3s ease;
        }

        .weapon-modal-header {
            position: relative;
            padding: 0;
            text-align: center;
            background: var(--rarity-gradient, linear-gradient(135deg, #666 0%, #444 100%));
        }

        .weapon-modal-header.ancient {
            background: linear-gradient(135deg, #eb4b4b 0%, #c73e3e 100%);
        }

        .weapon-modal-header.legendary {
            background: linear-gradient(135deg, #d32ce6 0%, #b825c7 100%);
        }

        .weapon-modal-header.mythical {
            background: linear-gradient(135deg, #8847ff 0%, #7239e6 100%);
        }

        .weapon-modal-header.rare {
            background: linear-gradient(135deg, #4b69ff 0%, #3d56e6 100%);
        }

        .weapon-modal-header.uncommon {
            background: linear-gradient(135deg, #5e98d9 0%, #4a7bc7 100%);
        }

        .weapon-modal-header.common {
            background: linear-gradient(135deg, #b0c3d9 0%, #9ab0c7 100%);
        }
		
		.input-field {
			width: 100%;
			border-radius: 10px;
			height: 40px;	
			padding: 10px;
			border: 0px;	
			font-family: "Exo 2", sans-serif;
			margin-bottom: 14px;
		}

		.modal-button {
			width: 100%;
			border-radius: 10px;
			height: 40px;	
			padding: 10px;
			border: 0px;	
			font-family: "Exo 2", sans-serif;
		}

		.save-button {
			background-color: #29a9ff;
			color: #fff;
		}

		.modal-title {
			margin: 0px;
			align-content: center;
			height: 32px;
			font-size: 22px;
		}
		
		.steam-link-text {
			margin: 14px 0;
			font-size: 14px;			
		}
		
		.steam-link-text p {
			font-size: 14px;			
		}
		
		.steam-link-text li {
			font-size: 14px;	
			padding: 2px;			
		}
		
		.steam-link-text a {
			color: #29a9ff;
			word-break: break-all;		
		}
				
		.steam-link-text-list {
			padding-left: 20px;
			font-size: 14px;			
		}
		
		.input-modal-content {
			padding: 20px;
		}
		.input-modal {
			background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
			border-radius: 16px;
			max-width: 400px;
			width: 100%;
			margin: auto;
			overflow: hidden;
			position: relative;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
			animation: modalSlideIn 0.3s ease;
		}

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
            z-index: 10;
        }

        .modal-close:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        .modal-actions {
            display: flex;
            gap: 0;
            margin: 0;
        }

        .action-btn {
            flex: 1;
            gap: 5px;
            padding: 10px 12px;
            border: none;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .action-btn.sell {
            background: #333333;
            color: white;
        }

        .action-btn.get {
            background: #333333;
            color: white;
        }

        .action-btn.share {
            background: #333333;
            color: white;
        }

        .action-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .action-btn:active {
            transform: translateY(0);
        }

        .weapon-details {
            padding: 20px;
            background: #1a1a1a;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #333;
            color: #ccc;
        }

        .detail-row:last-child {
            border-bottom: none;
        }

        .detail-label {
            font-weight: 500;
            color: #aaa;
        }

        .detail-value {
            font-weight: 600;
            color: #fff;
        }

        .close-btn {
            background: #333;
            color: white;
            border: none;
            padding: 16px;
            width: 100%;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }



        .close-btn {
            background: #333;
            color: white;
            border: none;
            padding: 16px;
            width: 100%;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .close-btn:hover {
            background: #444;
        }
		
        /* Анимации */
        @keyframes modalSlideIn {
            from { 
                opacity: 0;
                transform: translateY(-30px) scale(0.95);
            }
            to { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }




@keyframes moveTexture {
  0% {
    background-position: 0 0, center;
  }
  100% {
    background-position: 100px 100px, center;
  }
}


    #custom-loader {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      animation: loading 2s linear infinite;
      z-index: 9999;
    }

    @keyframes loading {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }