.inventory-item { flex-shrink: 0; width: 100%; background: linear-gradient(135deg, #2a3d53 0%, #1f2d3f 100%); display: flex; gap: 16px; align-items: center; justify-content: flex-start; border: 1px solid #666; border-left: 4px solid #ffffff; border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); &:hover { background: linear-gradient(135deg, #3a4d63 0%, #2f3d4f 100%); transform: translateY(-2px); //box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); border-color: #888; } &:active { transform: translateY(0); //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } &.equipped { border: 2px solid #4caf50; background: linear-gradient(135deg, #2e3e2e 0%, #1f2d1f 100%); //box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); &:hover { background: linear-gradient(135deg, #3e4e3e 0%, #2f3d2f 100%); //box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4); } .inventory-item__name { color: #4caf50; } } .inventory-item__icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a2a3a 0%, #0f1a2a 100%); border-radius: 8px; border: 1px solid #3a4a5a; //box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); img { width: 32px; height: 32px; object-fit: contain; //filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } .category-icon { font-size: 24px; //filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } } .inventory-item__info { flex: 1; min-width: 0; gap: 20px; .inventory-item__name { font-size: 16px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; //text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .inventory-item__description { font-size: 12px; color: #cccccc; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; } .inventory-item__category { font-size: 10px; color: #8fc98f; background: linear-gradient(135deg, rgba(143, 201, 143, 0.2) 0%, rgba(143, 201, 143, 0.1) 100%); padding: 2px 8px; border-radius: 4px; display: inline-block; border: 1px solid rgba(143, 201, 143, 0.3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } } .inventory-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; .inventory-item__slot { font-size: 10px; color: #8fc98f; background: linear-gradient(135deg, rgba(143, 201, 143, 0.3) 0%, rgba(143, 201, 143, 0.2) 100%); padding: 2px 8px; border-radius: 4px; font-weight: 500; border: 1px solid rgba(143, 201, 143, 0.4); text-transform: uppercase; letter-spacing: 0.5px; } .inventory-item__count { font-size: 12px; color: #cccccc; font-weight: 500; background: rgba(0, 0, 0, 0.2); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } .inventory-item__equipped { font-size: 14px; color: #4caf50; font-weight: bold; //text-shadow: 0 1px 2px rgba(76, 175, 80, 0.5); animation: pulse 2s infinite; } } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }