/* COMPAT-правила inventory из mpg-platform.css (Фаза 3) + uk-subset для инвентаря.
   Строки предметов и панели — стили classicbk (main/buttons/project-ui). */
/* ================= 8. COMPAT: inventory (перенести в modules/inventory/inventory.css) ================= */
.w_slots_new_in {
	/*border: 1px solid #a3a3a3;*/
	margin: 1px;
	outline: 2px solid #a3a3a3;
	outline-offset: -2px;
	/* Пустой слот того же размера, что и заполненный (убираем "хвост" под картинкой) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc( 100% - 2px );
	height: calc( 100% - 2px );
	box-sizing: border-box;
	line-height: 0;
}

.w_slots_new_in_blink {
    border: 2px solid transparent;
    margin-top: 2px;
    outline: 3px solid transparent;
    outline-offset: -3px;
    position: relative;
    
    background: 
        linear-gradient(#d3d3d3, #d3d3d3) padding-box,
        linear-gradient(-90deg, 
            #a3a3a3,
            #c0c0c0,
            #d4d4d4,
            #FFFFFF,
            #c0c0c0,
            #a3a3a3
        ) border-box;
    background-size: 100% 100%, 600% 100%;
    animation: gradient-slide 30s linear infinite;
}

@keyframes gradient-slide {
    0% { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, 600% 0; }
}

.w_slots_new_inOk {
    margin: 1px;
    position: relative;
    outline: calc( 1px * var(--sizerem) ) solid #646464;
    outline-offset: calc( -1px * var(--sizerem) );
    /* Вещи (картинка предмета) ровно по центру слота: по ширине и по высоте */
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc( 100% - 2px );
    height: calc( 100% - 2px );
    box-sizing: border-box;
    line-height: 0;
}

.w_slots_new_inOk::before { /* Используем inset для box-shadow вместо absolute */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* Чтобы не мешал кликам */
    z-index: 1;
    
    box-shadow: 
        inset calc( 1px * var(--sizerem) ) 0 0 0 #eee,   /* белая слева */
        inset 0 calc( 1px * var(--sizerem) ) 0 0 #eee,   /* белая сверху */
        inset calc( -1px * var(--sizerem) ) 0 0 0 #222,  /* черная справа */
        inset 0 calc( -1px * var(--sizerem) ) 0 0 #222;  /* черная снизу */
}

	.w_slots_new_inOk.effSlot1 {
		margin-top: 1px;
		position: relative;
		/* Не трогаем border и outline элемента */
	}

	.w_slots_new_inOk.effSlot1::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 1;

		/* Градиентная рамка */
		padding: calc( 2px * var(--sizerem) );
		background: linear-gradient(90deg, 
			#FFD700,  /* золотой */
			#DAA520,  /* тёмно-золотой */
			#B8860B,  /* тёмный золотисто-коричневый */
			#F4A460,  /* песочный */
			#FFA500,  /* оранжево-золотой */
			#FFD700   /* золотой */
		);

		/* Маска для создания только рамки */
		-webkit-mask: 
			linear-gradient(#fff 0 0) content-box, 
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;

		background-size: 600% 100%;
		animation: gradient-slide_wslots 15s linear infinite;
	}

.w_slots_new_inOk.effSlot2 {
    position: relative;
    overflow: hidden;
}

.w_slots_new_inOk.effSlot2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Полупрозрачный градиент */
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 45%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.5) 55%,
        transparent 70%
    );
    background-size: 200% 200%;
    
    /* Маска по форме картинки */
    -webkit-mask-image: url('your-image.png');
    mask-image: url('your-image.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    animation: shine-sweep 2.5s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

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

@keyframes shine-sweep {
    0% {
        background-position: -100% -100%;
    }
    100% {
        background-position: 200% 200%;
    }
}


/* uk-subset (.uk-grid[атрибут] / .uk-width-expand / .uk-margin-remove /
   .uk-padding-remove) теперь один на платформе — static/css/mpg-platform.css,
   раздел 5. Дубли в модулях не нужны. */

/* Мобильная адаптация (платформенный слой, как mpg-platform.css):
   classicbk сам по себе не адаптивен (у него 980px скролл на 430px), у нас —
   три колонки сжимаются по ширине экрана без горизонтального скролла. */
@media (max-width: 560px) {
  #main_tbl_inventory {
    table-layout: fixed;
  }
  #main_tbl_inventory > tbody > tr > td:first-child { width: 36% !important; }
  #main_tbl_inventory > tbody > tr > td:nth-child(2) { width: 28% !important; }
  #main_tbl_inventory > tbody > tr > td:nth-child(3) { width: 36% !important; }
  /* Блок персонажа — фиксированная блочная сетка 246px (render-block);
     прежнее растягивание таблицы на 100% больше не нужно. */
  .msm_title { min-width: 0; }
  #inv_filter_name { width: 88px !important; }
  /* Только страница инвентаря (#main_tbl_inventory): #inv_main есть и в
     «Хранилище» клана / «Выставить предмет» аукциона, их раскладку не трогаем. */
  #main_tbl_inventory #inv_main table { table-layout: fixed; width: 100% !important; }
  #main_tbl_inventory #inv_main td.inv-zn { white-space: normal; word-break: break-word; line-height: 1.2; }
  /* Своя ширина/отступы: не наследовать мобильные правила других модулей
     (clan.css задавал #inv_main > table min-width:560px — 6-я и 7-я вкладки
     уезжали за экран 430px). Семь подписей должны помещаться в ряд. */
  #main_tbl_inventory #inv_main { margin-left: 0 !important; }
  #main_tbl_inventory #inv_main > table { min-width: 0 !important; }
  #main_tbl_inventory #inv_main td.inv-zn {
    font-size: 11px;
    line-height: 1.15;
    padding-left: 1px;
    padding-right: 1px;
  }
}


/* ================= Skeleton первой загрузки инвентаря ================= */
.inv-skeleton {
    display: grid;
    grid-template-columns: calc(246px * var(--sizerem, 1)) calc(244px * var(--sizerem, 1)) minmax(0, 1fr);
    gap: calc(10px * var(--sizerem, 1));
    padding: calc(10px * var(--sizerem, 1));
    box-sizing: border-box;
    width: 100%;
}
.inv-sk-col { min-width: 0; }
.inv-sk-avatar {
    width: calc(240px * var(--sizerem, 1));
    height: calc(286px * var(--sizerem, 1));
    background: linear-gradient(100deg, #cfcfcf 20%, #e2e2e2 40%, #cfcfcf 60%);
    background-size: 200% 100%;
    animation: inv-sk-pulse 1.3s linear infinite;
    border: 1px solid #b5b5b5;
    box-sizing: border-box;
}
.inv-sk-login, .inv-sk-title, .inv-sk-toolbar, .inv-sk-line,
.inv-sk-tabs span, .inv-sk-row {
    background: linear-gradient(100deg, #cfcfcf 20%, #e2e2e2 40%, #cfcfcf 60%);
    background-size: 200% 100%;
    animation: inv-sk-pulse 1.3s linear infinite;
}
.inv-sk-login { height: calc(18px * var(--sizerem, 1)); width: 60%; margin: calc(10px * var(--sizerem, 1)) 0 calc(8px * var(--sizerem, 1)); }
.inv-sk-title { height: calc(14px * var(--sizerem, 1)); width: 55%; margin-bottom: calc(12px * var(--sizerem, 1)); }
.inv-sk-line { height: calc(11px * var(--sizerem, 1)); margin: 0 0 calc(9px * var(--sizerem, 1)); border-radius: 1px; }
.inv-sk-loading { font-size: calc(12px * var(--sizerem, 1)); color: #666; padding: calc(6px * var(--sizerem, 1)) 0 calc(10px * var(--sizerem, 1)); }
.inv-sk-tabs { display: flex; gap: calc(4px * var(--sizerem, 1)); margin-bottom: calc(10px * var(--sizerem, 1)); }
.inv-sk-tabs span { display: block; height: calc(24px * var(--sizerem, 1)); flex: 1; }
.inv-sk-toolbar { height: calc(28px * var(--sizerem, 1)); width: 100%; margin-bottom: calc(10px * var(--sizerem, 1)); }
.inv-sk-row { height: calc(154px * var(--sizerem, 1)); margin-bottom: calc(6px * var(--sizerem, 1)); }
@keyframes inv-sk-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }